0

我通过以下方式从 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;
    }
);
4

1 回答 1

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()对在将事件处理程序重新绑定到现在与选择器匹配的所有元素之前，从先前存在的元素（上次调用函数时存在的元素）中删除任何相同的事件处理程序。

于 2012-08-03T12:49:07.623 回答