使用jQuery动态生成的锚点标签点击后刷新页面问题求助

这问题我太熟悉了！你碰到的是动态DOM元素的事件绑定失效典型场景，具体原因和解决方案如下：

问题根源 #

你直接用$('.show-directions').click(...)绑定事件时，那些通过jQuery append方法动态生成的<a>标签还不存在于DOM中，所以事件并没有真正绑定到这些新生成的元素上。点击时就触发了a标签的默认行为——跳转页面（如果href是#或者空的话就会刷新当前页）。

解决方案：使用事件委托 #

把事件绑定到页面加载时就存在的父元素（比如你的表格容器、甚至document）上，利用事件冒泡机制来捕捉动态元素的点击事件。修改你的事件绑定代码如下：

// 用on方法实现事件委托，第一个参数是事件类型，第二个是目标选择器
$(document).on('click', '.show-directions', function(event) {
    event.preventDefault(); // 阻止a标签默认跳转行为
    $('.ui.modal').modal('show');
    setTimeout(function() {
        initMap();
    }, 500);
});

额外优化建议 #

为了更稳妥，你可以给动态生成的锚点标签设置一个不会触发跳转的href值，比如：

<!-- 动态生成的td内容示例 -->
<td><a href="javascript:void(0)" class="show-directions">查看路线</a></td>

这样即使event.preventDefault()因为某些原因没生效，也不会触发页面刷新。

验证效果 #

修改后再点击动态生成的锚点标签，应该会正常弹出模态框并调用initMap()函数，页面也不会刷新了。

内容的提问来源于stack exchange，提问作者Mehdi Ammar