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

Question

我正在努力实现的一个简单示例:

$('.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”的链接，该类具有准备好处理点击的功能。单击时我需要触发现有功能，在这个例子中它应该提醒“测试”，但该链接作为常规链接工作。

Answer 1

考虑使用 jQuery 的 .on() 方法来确保您的事件逻辑绑定(bind)到将来添加到 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 处理程序将为当前存在的任何匹配元素或稍后添加的元素(即在您的表单提交之后)调用。

欲了解更多信息，see the documentation对于 on()。希望这对您有所帮助!