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();
 });
});

编辑html后，preventDefault（）无法正常工作

1 个答案: