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

<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关联的单击事件。但是这个事件不起作用。

有人能帮忙吗?

当前回答

在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

其他回答

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

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

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

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

2013-04-08 13:07:44

你需要使用.live来工作:

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

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

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

2011-07-12 02:06:58

$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

只会工作，如果DIV类.surrounding_div_class是直接的父对象。test

如果在div中有另一个对象将被填充，它将不起作用。

2013-07-25 14:42:53

对委托事件使用.on()方法

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

.on()方法允许你将任何想要的事件处理程序委托给: 当前元素或将来添加到DOM的元素。

注:不要使用.live()!从jQuery 1.7+开始，.live()方法已弃用。

2013-01-26 02:31:12

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

2013-07-19 08:26:08

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

推荐文章

最新文章

标签