使用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”的任何div下的所有表单，但它似乎不起作用，并且表单像往常一样提交。

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

我在这里缺少什么？

Answer 1

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

因此，因为您正在动态添加my_cart事件订阅，所以在文档就绪事件中将不起作用。

您需要使用 jQuery on() 方法来订阅动态添加元素的事件：

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