Satan`
2021-01-12 00:11
采纳率: 25%
浏览 69

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'   这个父元素也是动态生成的

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

11条回答 默认 最新

  • 天际的海浪 2021-01-12 18:11
    已采纳

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

    打赏 评论
  • 天际的海浪 2021-01-12 01:37

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

    打赏 评论
  • 樂途途 2021-01-12 08:44
    //可以尝试绑定在DOM上
    $(document).on('click','.pay',function(){
        console.log(11)
    });
    打赏 评论
  • zhshchilss 2021-01-12 09:17

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

    打赏 评论
  • 禅思院 2021-01-12 09:22

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

    打赏 评论
  • Satan` 2021-01-12 14:52

    绑定在document上也没有效果

     

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

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

    打赏 评论
  • 禅思院 2021-01-12 16:03

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

    打赏 评论
  • 禅思院 2021-01-12 16:03

                            $.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
                                
                            });
                            
                        }

                     });
                
            });

    打赏 评论
  • 禅思院 2021-01-12 16:04

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

    打赏 评论
  • 禅思院 2021-01-12 16:04

    不然绑定不上事件

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

    打赏 评论
  • Satan` 2021-01-12 17:19

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

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

    打赏 评论

相关推荐 更多相似问题