2

私はこれに頭をぶつけています。

フォームの送信を防止したいので、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;
})
});

私の理解では、クラスが「my_cart」であるdiv の下のすべてのフォーム$("div.my_cart form")をキャッチすることになっていますが、機能していないようで、フォームは通常どおり送信されます。

いくつかのブラウザー (Chrome、FF、Safari) でテストしたので、ブラウザーの問題ではありません。

ここで何が欠けていますか？

4

1 に答える 1

5

内のコード$(document).ready(function() {は、DOM が読み込まれるときに 1 回だけ実行されます。AJAX を使用してページの追加部分をロードすると、このメソッドは再起動しません。

したがって、イベント サブスクリプションを動的に追加しているためmy_cart、ドキュメント準備完了イベントでは機能しません。

動的に追加された要素のイベントをサブスクライブするには、jQuery のon() メソッドを使用する必要があります。

$(document).ready(function () {
    alert("Hello");
    $(document).on("submit", "div.my_cart form", function () {
        alert("no go");
        return false;
    });
});
于 2013-02-17T15:57:55.903 に答える