javascript - 编辑 html 后，preventDefault() 不起作用

Question

我有以下 HTML:

<div class="artikelen">
 <div>
  <div>
   <img src="http://mijnmanege.nl/img/artikelen/1.png" alt="Article" />
  </div>
  <strong>Article</strong>
  <span>{artikel_groep} (<span data-artikel-groep-id="1">1</span>)</span>
  <img src="/img/v3/main/icons/geld.png" alt="Price" /> 999
  <form method="post">
   <input type="number" value="1" name="aantal" max="99" min="1" required="required" data-artikel-id="1" data-artikel-groep-id="1" />
   <input type="submit" value="Buy" name="submit" />
  </form>
 </div>
</div>

以及以下 jQuery:

$(document).ready(function() {
 $('.artikelen form').submit(function(e) {
  alert('We are in!');
  e.preventDefault();
 });
});

当我按下提交按钮时，我收到“我们已进入”警报，并且表单无法提交。但是，当我使用 $('.artikelen').html(code...); 时向类 artikelen 添加完全相同的 html 代码(当然没有第一个和最后一个)，它仍然会被提交，甚至不会触发错误。

控制台不会给出任何错误。

提前致谢。

抱歉，我的英语不好，我不是本地人。

Answer 1

您正在重新调整表单，因此事件绑定(bind)消失了，您可以使用委托(delegate)来解决这个问题:

$(document).ready(function() {
 $(document).on('submit', '.artikelen form', function(e) {
  alert('We are in!');
  e.preventDefault();
 });
});