动态生成元素绑定事件方法（事件委托）

我的元素是后来动态添加到页面的，而我又想给该元素绑定事件，怎么处理？

为了说明白这一问题，我们假设需要给后来添加到当前页面的元素添加click事件。

 

解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件

 

$.each(hotData, function(index, item) {

        supHTML += `<li><span>${item.city}</span><span>${item.sales} <s class=${item.flag ? "icon-up" : "icon-down"}></s> </span></li>`

        // 不支持if else 所以用三元表达式. 如果flag 为 true 就返回up

    });

    // 把这个追加到sup里

    $(".sup").html(supHTML);

    // 当鼠标进入tab的时候

    // 鼠标经过当前li要高亮显示（因为li都是动态生成的，所以这里要用事件委托）

    $(".province .sup").on("mouseenter", "li", function() {

        $(this)

        .addClass("active")

        .siblings()

        .removeClass();

    })