Question

lib-used： - http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

jquery的

$(document).ready(function(){
       $("#dynamic").append("<div class=id1>Dynamically created click</div>");
       $("#id1").click(function(){
        alert("triggerd func is:"+(this));
     });
});

HTML

<body>
    <div id="id1">Hard Coded Click</div><!-- working -->
    </br>
    <div id="dynamic"></div><!-- not working -->
</body>

Answer 1

你的工作不起作用是..你的点击事件选择id为id1的所有元素，所以动态添加的元素有类而不是id ..所以事件不起作用......

这样做的一种方法是

你的选择器应该是类选择器...而不是id ...在委托事件上使用动态添加的元素来使用该事件。

 $("#dynamic").on('click','.id1',function(){
                alert("triggerd func is:"+(this));


  });

注意：id应该始终是唯一的，并且对于硬编码的div来说，你应该将id设置为class

  <div class="id1">Hard Coded Click</div><!-- working -->
   //--^^^^^----here

Answer 2

这些答案包括正确的代码（使用on），但它们没有解释为了使用click（）方法触发点击侦听器，必须在绑定之前加载元素事件

因此，这将有效：

$("#dynamic").append("<div class='id1'>Dynamically created click</div>");
$(".id1").click(function(){
    alert("triggerd func is:"+(this));
});

但是这不会

$(".id1").click(function(){
    alert("triggerd func is:"+(this));
});
$("#dynamic").append("<div class='id1'>Dynamically created click</div>");

所以基本上如果你使用.on('click', '.id1', ....)它会以任何方式开火。

另外，为了让所有内容都在同一个答案中，您的选择器基于ID属性而不是您正在使用的类名。

Answer 3

您将点击事件绑定到ID = id1的元素。如果单击具有不同Id的元素，则不会触发它。

将类添加到两个div并将click事件选择器调整到该类，即

$("body").on("click", ".divsClass", function(){
            alert("triggerd func is:"+(this));
});

Answer 4

使用on而不是click.Code将是这样的

$(document).on('click','.id1',function(){
        alert("triggerd func is:"+(this));
});

我希望它会有所帮助

Jquery动态创建div以触发另一个函数

4 个答案: