Jquery无法处理动态添加的按钮

Jquery not working on dynamically added button?

本文关键字：添加 按钮 动态 处理 Jquery      更新时间：2023-09-26
$(document).ready(function(){
    var t = $("<div><button class='leaf' id='l2'>Awesome!</button></div>");
   $('#l1').click(function(){
       $('#num').text("four");
       }); 
    $('.oright').click(function(){
       $('#num').text("Five");
       $('.oright').after(t);
       $('.oright').remove();
    });
    $('#l2').on('click', function(){
       $('#num').text("Reset?");
    });
});

#l2按钮没有任何功能。我没有看到任何语法错误，我查了一下，发现对于动态元素，.on('click'(比.click要好，所以我改变了它，但它仍然不起作用。

您必须委派才能使其工作

$(document).on('click', '#l2', function(){
   $('#num').text("Reset?");
});

最好将document替换为最接近的非动态父元素

因为您已经将新按钮标记定义为jquery对象t，所以您可以为其分配点击处理程序。

$(document).ready(function(){
    var t = $("<div><button class='leaf' id='l2'>Awesome!</button></div>");
   $('#l1').click(function(){
       $('#num').text("four");
       }); 
    $('.oright').click(function(){
       $('#num').text("Five");
       $('.oright').after(t);
       $('.oright').remove();
    });
    /* use the t jquery object you have defined */
    t.on('click', function(){
       $('#num').text("Reset?");
    });
});

或者以@adeneo的身份委派，显示良好

相关文章：