13

以下のリンクはモーダルを示し、オブジェクトIDに基づいてモーダル内でパーシャルをレンダリングするためにajaxリクエストを実行します。リンクは正常に機能し、ページにhttpリクエストが完全に読み込まれるとモーダルがポップアップしますが、ajaxリクエストでリンクをレンダリングすると（たとえば、別のモーダルがポップアップしていくつかのリンクをレンダリングする場合）、js関数は機能しません実行しません。alert（）;を試しました。確認するだけで、ajaxでレンダリングすると実行されません。

私はJQuery1.9.1を使用していますが、以前はjsは.live（'click'）で動作していましたが、その後削除されました。.click（）も試しました

何か案は？ありがとうございました！

リンク

<a href="/an-object-id" data-remote=true name="modal">

JS

$(document).ready(function() {
$("a[name=modal]").on("click", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...
4

4 に答える 4

24

.on()を使用してイベント ハンドラーを親要素にアタッチし、セレクターを引数として渡します。

例：

$(document).on("click", "a[name=modal]", function(e) {...});

動的に生成された要素でも機能します..

于 2013-02-20T06:41:29.483 に答える
5 
$(document).on("click", "a[name=modal]", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...
于 2013-02-20T06:40:24.490 に答える
4

イベント委任で使用..リンクが動的に生成されるため...クリックイベントは発生しません...ドキュメントを使用してイベントを委任します..

 $(document).on("click","a[name='modal']", function(e) {
       ..
 });

委任されたイベントの詳細については、リンクを参照してください。パフォーマンスを向上onさせるよりも、ドキュメントに存在する最も近い要素でイベントを委任する方がはるかに優れています。document

于 2013-02-20T06:41:08.083 に答える
3

基本的に、クリック イベントのリスナーを、変更されない DOM 内の何かにバインドする必要があります。on()には、リスナーとして選択された項目の子要素へのイベント トリガーをフィルター処理できるオプションのパラメーターがあります。最も簡単なのは を使用するdocumentことですが、変更しないことがわかっている最も近い親を使用することを好みます。したがって、次のマークアップがあると仮定します。

<div id="super-awesome-parent">
    <ul>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
    </ul>
</div>

on()次のようにデリゲートを書くことができます。

$('#super-awesome-parent').on('click', 'a', function(event){ 
    // ... code 
});

その後、イベントの後に<a>追加された要素は引き続きデリゲートによって処理されます。#super-awesome-parentready()

于 2013-02-20T06:52:06.253 に答える