Question

这是我的HTML

 <div id="main">
    <div class="submit">welcome</div>
 </div>

这是我的jquery

 $(".submit").click(function()
 {
     $("$main").append('<div class="submit">welcome</div>');

 });

这里发生了什么事情，这是为第一个div工作。这个事件不适用于新添加的div？

如何解决这个问题？

Answer 1

您有两个选项，委托（指定父级检测到的点击处理程序）：

$('#main').on('click', 'div.submit', function(){
    // this is your click-handler
});

或者通过在元素创建点绑定click-handler：

$(".submit").click(function() {
    $('<div />', {
        'class' : 'submit',
        'on' : {
            'click' : function(){
                // this is your click-handler
            }
        }).appendTo('#main');

});

显然，如果你有一个要调用的命名函数，你可以分配它而不是使用匿名函数：

$('#main').on('click', 'div.submit', namedFunctionToCall);

或者：

$(".submit").click(function() {
    $('<div />', {
        'class' : 'submit',
        'click' :  namedFunctionToCall
        }).appendTo('#main');

});

参考文献：

Creating elements, with jQuery。
on()。

Answer 2

使用委托：

$("#main").on("click", ".submit", function()
{
    $("#main").append('<div class="submit">welcome</div>');
});

选择$时，将#替换为#main。

Answer 3

使用event delegation

$("#main").on('click', '.submit', function () {
    $("#main").append('<div class="submit">welcome</div>');
});

演示：Fiddle

Answer 4

如果您使用的div id喜欢

，则需要定义＃

$("#main").append();

如果你的使用类可以访问它。像那样

$(".main").append();

Answer 5

试试这个

$(function(){
    $('.submit').bind('click', function (event) {
       alert("Hello");
     });
   });

Answer 6

您可以使用实时功能

 $( ".submit" ).live( "click", function() {
  alert("Appended" ); // jQuery 1.3+
});

如何在jquery中为新附加的div添加click事件？

6 个答案: