javascript - 解析外部 html 时不会触发 Click 事件

Question

我有一个项目，需要从外部文件加载 html 并将其添加到现有的 div 元素中。 它工作得很好，只是当点击生成的 html 中所需的图标时，.click() 事件永远不会触发。

加载 html 的代码:

$.each(data, function (index, review) {
    let html = $.parseHTML($.trim(review));

    $(html).appendTo($items);
});

加载的 html 的根元素是一个名为“lc- rating-wrap”的类。

点击时不触发的js:

$(".lc-rating-wrap > .vote-wrap > .do-vote-wrap > .icon").click(function () {
    //doStuff
});

我猜这与我加载js文件时元素不存在有关？ 我是否正确使用了parseHTML()？

Answer 1

您的内容是动态的，但您的事件仅绑定(bind)到现有元素。将其更改为 $(static).on(event,dynamic,callback):

$(document).on('click', ".lc-rating-wrap > .vote-wrap > .do-vote-wrap > .icon", function () {
    //doStuff
});