編輯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

你正在重新整理表單，以便事件綁定消失，你可以使用委托來解決這個問題：

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