0

スクリプト：

$(document).ready(function(){
    $.ajax({   
        type    : "POST",
        url     : "list_controller.php",
        data    : "a=get&list_id=my_list",
        success : function(data){
            $('#list_container').innerHTML = data;
        }
    });                     
});

HTML：

<div id="list_container"></div>

サーバーから返されたHTMLには、クリック可能なリンクがいくつか含まれています。dataこれにより、別のjQuery関数がトリガーされ、 #list_containerDIVが再度リロードされます。

<a href="#" value="a=edit&list_id=my_list&user=artur&id=110" id="adminlink">
    <img src="images/edit_user.png" />
</a>

これらのリンクで他のAJAX関数f.exを呼び出すようにします。

$(document).ready(function(){
    $('#adminlink').click(function () {
        var val = $(this).attr("value");
        $.ajax({       
            type    : "POST",
            url     : "list_controller.php",
            data    : val,
            success : function(data){
                $('#list_container').innerHTML = data;
            }
        });
    });
    return false;
 });

#adminlink問題は、クリック機能をトリガーするアンカー要素にアクセスできないことです。

他のすべては問題なく機能していますが、innerHTMLダイナミックの要素にはdataアクセスできなくなりました。

4

1 に答える 1

5

の内容を上書きしているため#list_container、#adminlinkハンドラーを登録したのはページ上のものではなくなります。

最も簡単な解決策は、イベントのバブリングに依存するイベントの委任です。

$('#list_container').on('click', '#adminlink', function() { 
    ...
});

つまり、実際にはイベント#list_containerを受け取るのは静的要素ですclickが、jQueryはadminlink、必要なハンドラーを呼び出す前に、実際にクリックされたIDを持つ要素であるかどうかを確認します。

イベント委任を使用するときは、常に「最も近い」静的な祖先要素を使用するようにしてください。この場合、これはのように見えます#list_container。最悪の場合、使用することになりますが、イベントを処理する前に、イベントをDOM全体documentにバブルする必要があります。

于 2013-02-26T17:46:28.707 に答える