“单击”事件对动态生成的元素不起作用

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("button").click(function() {
                $("h2").html("<p class='test'>click me</p>")
            });   

            $(".test").click(function(){
                alert();
            });
        });

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

我试图通过单击按钮在<h2>中生成一个类名为test的新标记。我还定义了一个与test关联的单击事件。但是这个事件不起作用。

有人能帮忙吗?

当前回答

你需要使用.live来工作:

$(".test").live("click", function(){
   alert();
});

或者如果你使用jquery 1.7+使用.on:

$(".test").on("click", "p", function(){
   alert();
});

2011-07-12 02:06:58

其他回答

在js文件中添加这个函数。它可以在所有浏览器上运行

$(函数(){ 美元(文档)。On ("click"， '#mydiv'， function() { 提示(“您刚刚点击了”); })； })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div id =“mydiv”> div < / div >

2013-07-19 08:26:08

尝试.live()或.delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

您的.test元素被添加在.click()方法之后，因此它没有附加事件。Live和Delegate将事件触发器赋予检查子元素的父元素，因此之后添加的任何内容仍然有效。我认为Live将检查整个文档主体，而Delegate可以给一个元素，所以Delegate更有效。

更多信息:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

2011-07-12 02:10:09

Jquery .on的工作可以，但我有一些问题的渲染实现上面的一些解决方案。我使用.on的问题是，它在某种程度上呈现的事件不同于.hover方法。

只是供其他可能也有这个问题的人参考。我通过为动态添加的项目重新注册悬浮事件来解决我的问题:

重新注册悬停事件，因为悬停对动态创建的项目不起作用。所以每次我创建新的/动态项目时，我都会再次添加悬停代码。完美的作品

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

2013-04-08 13:07:44

你可以点击添加动态创建的元素。下面的例子。使用“何时”来确保完成。在我的例子中，我用类扩展抓取了一个div，添加了一个“点击查看更多”的跨度，然后使用这个跨度隐藏/显示原始的div。

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

2016-04-14 19:10:04

如果你有一个动态添加到某个容器或主体的链接:

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

你可以使用它的原始javascript元素并添加一个事件监听器，比如click:

newLink.get(0).addEventListener("click", doActionFunction);

无论你添加多少次这个新的链接实例，你都可以像使用jquery点击函数一样使用它。

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

所以你会收到一条信息说

它的好

它比其他替代方案具有更好的性能。

额外:你可以获得更好的性能避免jquery和使用纯javascript。如果你使用的是ie8版本，你应该使用这个polyfill来使用addEventListener方法

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

2016-11-10 18:45:37

“单击”事件对动态生成的元素不起作用

推荐文章

最新文章

标签