2022-02-18 工作记录--JS-动态创建的选择器点击事件无效的解决方法 + 【补充知识】jQuery跳转页面参数传递

JS-动态创建的选择器点击事件无效的解决方法

当我们前端用jQuery渲染数据时，可以通过append()动态添加内容，But我们会发现一个问题：当我们想 对添加内容里面的选择器绑定点击事件 时，是无效滴

example

HTML

<div class="news-list">
   <ul id="news-lists"></ul>
</div>

JS

<script src="/static/web/js/common/jquery.min.js"></script>

$(function() {
	// 富文本处理
    function showHtml(str){
      return str
          .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
          .replace(/&lt;/g,"<")
          .replace(/&gt;/g,">")
          .replace(/&quot;/g,"\"")
          .replace(/&#39;/g, "\'")
          .replace(/&amp;nbsp;/g,'\u3000')
    }
    
	var html = '';
	$.ajax({
        type: 'post',
        url: "{:url('newsList')}",
        data: data,
        dataType: 'json',
        success: function (res) {
          if (res.code == 2000) {
            res.data.data.map(function (item, index) {
              html += `<li>
                    	<div class="news-img">
                      		<img src="${item.thumb}" alt=""/>
                    	</div>
                    	<div class="news-content">
                        	<ul class="title-date">
                            	<li>${item.title}</li>
                            	<li>${item.inputtime}</li>
                        	</ul>
                        	<p class="news-desc">
                            	${showHtml(item.content)}...
                        	</p>
                        	<div class="news-more" data-id="${item.id}">查看更多</div>
                    	</div>
                	</li>`          
            })
            $('#news-lists').empty().append(html);
          } else {

          }
        },
        error: function (err) {

        }
      })
}

此时，假如我们想给选择器.news-more绑定点击事件

错误写法：❌

$('要选择的元素').on('click',function(){})

【只针对于页面已存在的选择器】

// 点击新闻里的 查看更多按钮 携带参数跳转到newsDetail.html页面
$('.news-more').on('click',function () {
   var id = $(this).attr('data-id');
   console.log(id);

   var url = "newsDetail.html?id="+id;
   window.location.href = url;
})

正确写法：✔✌

$(document).on('click','要选择的元素',function(){})

【动态创建的元素在该选择器选中范围内可以触发回调函数】

// 点击新闻里的 查看更多按钮 携带参数跳转到newsDetail.html页面
$('body').on('click','.news-more',function () {
   var id = $(this).attr('data-id');
   console.log(id);

   var url = "newsDetail.html?id="+id;
   window.location.href = url;
})

【补充知识】jQuery跳转页面参数传递

在newsDetail.html页面里拿到上页面跳转携带的参数id：

var id = $.Request('id');

前提条件：在newsDetail.html页面里引入Getparam.js：（先要引入jquery.min.js哟）

<script src="/static/web/js/common/Getparam.js"></script>

Getparam.js代码如下：【参考自优秀滴博文】

// Getparam.js
(function ($) {
  $.extend({
  
    //1、取值使用    $.Request("name")
    Request: function (name) {
      var sValue = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]*)(\&?)", "i"));
      //decodeURIComponent解码
      return sValue ? decodeURIComponent(sValue[1]) : decodeURIComponent(sValue);

    },
    
    //2、给url加参数    $.UrlUpdateParams(url, "add", 11111);
    UrlUpdateParams: function (url, name, value) {
      var r = url;
      if (r != null && r != 'undefined' && r != "") {
        value = encodeURIComponent(value);
        var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");
        var tmp = name + "=" + value;
        if (url.match(reg) != null) {
          r = url.replace(eval(reg), tmp);
        } else {
          if (url.match("[\?]")) {
            r = url + "&" + tmp;
          } else {
            r = url + "?" + tmp;
          }
        }
      }
      return r;
    }

  });
})(jQuery);