Question

我将以下列方式从jquery发送部分html代码

htmlCode1 = "<div class='txt_center'>\
<input type='button'  class='btn_view b widthauto' value='Add'  name='addShortlist'\ style='cursor:pointer;'";\
htmlCode1 += " id=add"+this.id+" >\
</div>";

这里我在html中分配了一个id和一个名字，并希望在点击这些id时执行某些功能，但不知怎的，我的onclick函数没有被执行。解决方案是什么？

我将onclick函数称为：

$("[name='addShortlist']").click(
    function()
    {
        alert("here");
        return false;
    }
);

Answer 1

使用.on()（jQuery 1.7+）或.delegate()函数，将事件处理程序注册到动态添加内容的解决方案是事件委派。基本原则是将事件处理程序绑定到静态元素（最坏的情况下，整个文档），只有当事件源自与选择器匹配的元素时才会执行回调函数。

一般代码看起来像这样：

$(document).on('click', '[name="addShortlist"]', function() {
    alert("here");
    return false;
});

这样，无论何时单击与选择器[name="addShotlist"]匹配的元素 - 如果在执行该代码后添加了该事件 - 它仍将执行回调函数。

有关详细信息，请参阅.on()文档中标题为直接和委派事件的部分。

更新

如果您使用的是jQuery版本而无法访问任何的事件委托函数（即在jQuery 1.3之前添加.live()时），那么您真正拥有的唯一选择就是做以下事情：

$(function() {
    function handleClick() {
        alert("here");
        return false;
    }

    function bindClicks() {
        $("[name='addShortlist']").unbind('click', handleClick).click(handleClick);
    }

    $("#test-button').click(function(e) {
        // dynamically add some content
        bindClicks();
    });
});

将匿名回调函数转换为命名函数（因此您可以传递对它的引用），将事件处理程序的绑定包装到函数中（这样您就可以从许多位置轻松调用它），并添加一个调用.unbind()从先前存在的元素（上次调用函数时存在的元素）中删除任何相同的事件处理程序，然后将事件处理程序重新绑定到现在匹配的所有元素选择器。

对通过jquery分配的id和名称执行click功能

1 个答案: