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, '&')
.replace(/</g,"<")
.replace(/>/g,">")
.replace(/"/g,"\"")
.replace(/'/g, "\'")
.replace(/&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);