preventDefault（）方法不編輯HTML

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

你repacing表單，因此該事件綁定走了，你可以使用委託來解決：

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