首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在通过jquery分配的ids和名称上执行单击函数

在通过jquery分配的ids和名称上执行单击函数
EN

Stack Overflow用户
提问于 2012-08-03 20:40:47
回答 1查看 255关注 0票数 0

我用下面的方式从jquery发送了一部分html代码

代码语言:javascript
运行
复制
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函数调用为:

代码语言:javascript
运行
复制
$("[name='addShortlist']").click(
    function()
    {
        alert("here");
        return false;
    }
);
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-08-03 20:49:08

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

一般的代码如下所示:

代码语言:javascript
运行
复制
$(document).on('click', '[name="addShortlist"]', function() {
    alert("here");
    return false;
});

这样,无论何时单击与选择器事件匹配的元素-如果它是在代码执行后添加的-它仍将执行回调函数。

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

更新

如果您使用的jQuery版本没有访问事件委派函数的任何(即在jQuery 1.3之前添加.live()时),那么您真正有的唯一选择就是执行以下操作:

代码语言:javascript
运行
复制
$(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()的调用,以便在将事件处理程序重新绑定到现在与选择器匹配的所有元素之前,从以前存在的元素(上次调用该函数时存在的元素)中删除任何相同的事件处理程序。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11795936

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档