当表单动态加载ajax时，jquery窗体选择器无法正常工作

Question

我在这上面敲了半天。

我想阻止提交表单，所以我可以使用ajax提交它，但不能让选择器工作。

我的标记是这样的：

<div class="my_cart"> 
<ul> 
<li> 
<form action="/cart/remove_item" method="post" accept-charset="utf-8"> 
<input type="hidden" name="rowid" value="eb0d73613fd555ed3dc24d3877447fc7"> 
<input type="submit" name="foofoo" value="*"> 
</form> 
</li> 
<li>London</li> 
<li class="crossed_price">46.00</li> 
<li class="discount_price">free</li> 
</ul> 
<ul> 
<li> 
<form action="/cart/remove_item" method="post" accept-charset="utf-8"> 
<input type="hidden" name="rowid" value="71d2b4c973728137ec1905264be464b8"> 
<input type="submit" name="foofoo" value="*"> 
</form> 
</li> 
<li>Paris</li> 
<li class="price">59.00</li> 
</ul> 
</div> 

而且JS是这样的：

$(document).ready(function() { 
alert("Hello"); // this is to see if the function is triggered on page load. it is. 
$("div.my_cart form").submit(function() { 
    alert ("no go"); 
    return false; 
}) 
}); 

据我了解，$("div.my_cart form")应该赶上所有形式下的任何格，它的类“my_cart”，但它似乎没有工作，并且表单像往常一样提交。

这不是浏览器问题，因为我在多种浏览器（Chrome，FF，Safari）上测试过它。

我在这里错过了什么？

Answer 1

您在$(document).ready(function() {中的代码只在加载DOM时运行一次。如果您使用AJAX加载页面的其他部分，则此方法不会再次触发它。

因此，因为您正在动态添加my_cart事件subsciption不会在文档就绪事件中工作。

您需要使用jQuery的on() method认购的动态添加元素的事件：

$(document).ready(function() { 
    alert("Hello"); 
    $(document).on("submit", "div.my_cart form", function() { 
     alert("no go"); 
     return false; 
    }); 
});