解析外部html

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

您的内容是动态的，但您的活动仅针对现有元素进行了绑定。将其更改为$(static).on(event, dynamic, callback)：

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

Answer 2

请使用委托代替。

$( "#parent" ).delegate( ".icon", "click", function() {
   //dostuff
});

Parent是用于生成元素（内部）的元素。 因此无法动态生成。

Answer 3

使用jquery点击事件委托。见https://learn.jquery.com/events/event-delegation/

当js绑定click事件时，将事件绑定到页面中已找到的父元素。使用.on（“点击”，“你的选择器”，函数（）{}）