jQuery怎么获取动态生成的元素,on方法的话,父元素也是动态生成的,怎么写。

问题描述:

    //对json数据进行遍历
                        $.each(data,function (index,item) {
                            html = "";//每次循环数据都设置为空
                            html += "<h1 align='center'>我的订单</h1>";
                            html += "<table id='dataTb' border='1' align='center' width='500px'>";
                            html += "<tr align='center'><td>订单号</td><td>我的订单</td><td>应支付</td><td></td></tr>";
                            html += "<tr align='center'>";
                            html += "<td>"+item.num+"</td>";
                            html += "<td>"+item.name+"</td>";
                            html += "<td>"+item.price+"</td>";
                            html += "<td><a href='' class='pay'>立即支付</a></td>"
                            html += "</tr>";
                            html += "</table>";
                            
                            document.write(html);        //在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
                            
                        });
                        
                    }

                 });
            
        });
        //支付购物车订单        //因为pay-btn按钮非本页原按钮,是刷新后的新按钮,所以点击事件要这样写。
            $('#pay-btn').on("click",'.pay',function(){
                alert(1);
            });
            

 

 

没有反应。'#pay-btn'   这个父元素也是动态生成的

你用document.write(html);就表示你的元素只是在页面加载时添加一次。
那click事件就不需要用委托式的方式绑定了。
可以在元素添加到页面之后直接对.pay元素本身绑定click事件。
 

那就把 $('#pay-btn')换成#pay-btn的父元素。
或者换成 $(document)
 

//可以尝试绑定在DOM上
$(document).on('click','.pay',function(){
    console.log(11)
});

你的id=pay-btn的元素在哪里

建议用clone 的方式去弄dom  这样绑定事件不会有问题,也不会重复绑定事件

绑定在document上也没有效果

 

原代码发错了  响应函数是下面这样的 

 $('#dataTb').on("click",'.pay',function(){
                alert(1);
 });

你渲染完成之后 再去执行这个方法

                        $.each(data,function (index,item) {
                            html = "";//每次循环数据都设置为空
                            html += "<h1 align='center'>我的订单</h1>";
                            html += "<table id='dataTb' border='1' align='center' width='500px'>";
                            html += "<tr align='center'><td>订单号</td><td>我的订单</td><td>应支付</td><td></td></tr>";
                            html += "<tr align='center'>";
                            html += "<td>"+item.num+"</td>";
                            html += "<td>"+item.name+"</td>";
                            html += "<td>"+item.price+"</td>";
                            html += "<td><a href='' class='pay'>立即支付</a></td>"
                            html += "</tr>";
                            html += "</table>";
                            
                            document.write(html);        //在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
                            
                        });
                        
                    }

                 });
            
        });

上面的$each 执行完成之后 执行 $('#dataTb').on("click",'.pay',function(){
                alert(1);
 }); 

不然绑定不上事件

如果按照我说的模板的形式  就没有这个问题  就是clone 的方式

如果直接在$each执行完毕之后   执行使用普通的响应函数也有反应了。   那就不要on方法了呗

$(".pay").click(function(){
            alert(12);
 });