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()方法来确保事件逻辑绑定到将来添加到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()。希望这会有所帮助！

如何附加一些代码并使之与已加载的js一起使用？

1 个答案: