1

AJAX を介して要素を動的に設定した後、jQuery 関数が新しいコンテンツで動作しないという問題があります。

たとえば、「更新」ボタンを押すと入力されるファイルのリストがあります。リスト内のアイテムをダブルクリックしたときにファイル名で警告を表示したい。各アイテムには「ファイル」クラスがあります。

私はこのコードを使用しています：

$('.file').on('dblclick', function(event){
                alert($(this).html());
            });

これは、最初に存在するすべての要素に対して機能しますが、AJAX 呼び出しの後では機能しません。

これは学校の課題であり、組み込みの jQuery AJAX 機能ではなく、通常の Javascript AJAX メソッドを使用する必要があります。これが問題であり、jQuery が新しく入力された要素に気付かない理由だと思います。

更新ボタンはこの関数を呼び出しています:

function getFileList()
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("files").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","filelist.php",true);
        xmlhttp.send();
    }

jQuery の AJAX メソッドではなく、AJAX 呼び出しに通常の JS を使用せざるを得ない場合、jQuery にこれらの新しい要素を適切に認識させるにはどうすればよいですか?

4

2 に答える 2

9

問題は、最初に存在する「.file」要素にのみ .on() を添付していることです。.on() をドキュメントに添付し、オプションとしてセレクターを指定するだけです。例えば

$(document).on('dblclick', '.file', function(event){
    alert($(this).html());
});

そうすれば、イベントはクラス「ファイル」の将来の要素に添付されます。

于 2012-11-22T17:38:46.723 に答える
-2

jQuery.onDOM に既に存在する要素にバインドします。将来の要素にバインドする必要がある場合は、使用するjQuery.liveか、バインドを解除してjQuery.on再度バインドすることができます。前者の方が簡単です。

$('.file').live('dblclick', function(event){
    alert($(this).html());
});

編集: 前述のように、live非推奨で遅いです。常に好むon。

于 2012-11-22T17:35:01.410 に答える