jq动态绑定

写了一个click事件发现没用，如下，

错误的写法：

$(".reason__icon").click(function () {
    if ($(this).siblings().text().indexOf("未命名") != -1) {
        $(this).append("<img src='../../../content/images/activity/share/weimingming.png'/>")
    }
})

问了后台才知道数据是页面加载后插入的数据，让我百度动态绑定。

这个才是正确的打开方式：

    <div class="fail__reason">
        @*<p class="reason__list"><span>1、方案存在未命名空间</span><a href="#" class="reason__icon"></a></p>*@
    </div>

//鼠标移入显示图片
$(function () {
    $(".fail__reason").on('mouseenter', '.reason__icon', function () {
        if ($(this).siblings().text().indexOf("全景图") != -1) {
            $(this).append("<img src='../../../content/images/activity/share/quanjingtu.png'/>")
        }
    }).on('mouseleave', '.reason__icon', function () {
        $(this).empty();
    });
})

jq中on的用法：

$(selector).on(event,childSelector,data,function)

event：必需。规定要从被选元素移除的一个或多个事件或命名空间。

childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

data：可选。规定传递到函数的额外数据。

function：可选。规定当事件发生时运行的函数。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

 

如果还不是很理解，可以通过下面两种方式的比较来说明一下

$('.class').on("click",function(){……});相当于$('.class').bind("click",function(){……});
$(document).on("click",'.class',function(){……});相当于$('.class').live("click",function(){……});