时间戳

首页 > 解决方案 > 如何附加一些代码并使其与已加载的 js 一起工作？

javascript - 如何附加一些代码并使其与已加载的 js 一起工作？

问题描述

我要实现的一个简单示例：

$('.test-link').click(function(e) {
  e.preventDefault();
  alert($(this).attr('href'));
});
$('.test-form').submit(function(e) {
  e.preventDefault();
  $(this).append('<a href="testing" class="test-link">Click here</a>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="test-form">
  <input type="submit">
</form>

提交表单后，它成功创建了带有“test-link”类的链接，该链接具有准备好处理点击的功能。单击时，我需要触发现有功能，在此示例中，它应该提醒“测试”，但该链接作为常规链接工作。

标签： javascriptjqueryappend

解决方案

考虑使用 jQuery 的.on()方法来确保您的事件逻辑绑定到将来添加到 DOM 的元素。

例如，您可以像这样更改代码：

$(function() {

$('.test-form').submit(function(e) {
  e.preventDefault();
  $(this).append('<a href="testing" class="test-link">Click here</a>');
});
  
$('body').on('click', '.test-link', function(e) {

  e.preventDefault();
  alert($(this).attr('href'));
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form class="test-form">
  <input type="submit">
</form>

这意味着您的click处理程序将被调用用于当前存在的任何匹配元素，或者稍后添加（即在您的表单提交之后）。

有关详细信息，请参阅. on()希望这可以帮助！

推荐阅读