jquery动态渲染绑定点击事件不生效

小白逆袭记**

已于 2022-09-08 11:28:45 修改

阅读量2k

点赞数 4

文章标签： jquery javascript 前端

于 2022-09-08 10:55:52 首次发布

本文链接：https://blog.csdn.net/weixin_65750673/article/details/126760068

版权

原因：动态添加的HTML元素是在CSS，JS代码加载完成后再渲染的HTML页面。浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时，这时绑定事件的标签元素还没有生成。而普通的点击click事件只能绑定静态元素。用on方法支持动态绑定元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jquery动态渲染绑定点击事件不生效</title>
  </head>
  <body>
    <ul class="index-module"></ul>
    <script>
      var url = "http://10.11.130.66:6666/";
      var storeid = "CS002";
      var mode=""//置空
      var page = 1;页数
      var limit = 10;条数
      // 发送ajax请求
      $.ajax({
        type: "GET",
        url: url + "ChuZhi/GetPay",
        async: true, //是否异步
        data: {
          storeid: storeid,
          page: page,
          limit: limit,
        },
        success: function (res) {
          if (res.code == 0) {
            var item = res.data;
            for (var i in item) {
              mode += `<li 
				data_GRADEID="${item[i].BILLID}" 
                @click="cresment(item[i].BILLID)">
				<p><label for="">单号:</label>
				<span >${item[i].BILLID}</span></p>			
				</li>`;}}
          $(".index-module").html(mode);
        },
      });
      //   问题一点击事件不生效
      function cresment(params) {
        console.log(GRADEID);
      }
       </script>
  </body>
</html>

解决办法一使用普通绑定事件

     $(".index-module li").click(function () {
        let GRADEID = $(this).attr("data_GRADEID");
        console.log(GRADEID);
      });

解决办法二将普通事件改为.on（）委托事件

    $("body").on("click", ".index-module li", function () {
        let GRADEID = $(this).attr("data_GRADEID");
        console.log(GRADEID);
      });