jquery添加的html元素按钮为什么不执行类样式绑定的click事件-优快云博客

本文介绍了解决动态生成元素上事件绑定的问题，通过使用jQuery的on方法实现对动态生成的按钮和输入框等元素的事件监听，确保了点击事件能够正确触发。

问题：在做页面的时候，有很多时候许多按钮还有许多行是需要动态生成的，但是动态生成之后点击按钮或者删除，无法触发绑定的click事件。

解决：在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on

把$(".submitBtn").click(function(){

$(document).on('click','.edit',function(){
        $(".modal,.shadow").removeClass('hide');
//        this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签
        var tds = $(this).parent().prevAll();
//        循环获取tds中的内容(td中的内容)，赋值给编程框中的value
        tds.each(function(){
//            this 当前每个td
//            获取自定义属性的值,hostname/port
            var n = $(this).attr('target');
//            获取当前td内容:1.1.1.1/80
            var v = $(this).text();
//            将获取的内容放入相应的编程框中
//          $('.modal input[name="[hostname"]').val(1.1.1.1)
//            因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接
//            var a1 = '.modal input[name="';
//            var a2 = '"]';
//            var temp = a1 + n + a2
            $('.modal input[name="' + n + '"]').val(v)
        });

    });