3

なぜこれが機能しないのかわかりません。

li 要素がクリックされると、PHP ファイルを呼び出して結果を取得し、ページに出力します。ここまでは順調ですね。

$("li").click(function(){

            var item = $(this).html();
            $.getJSON('fSearch.php',{sTerm: item}, function(data){
                var results='';

                $.each(data, function(i, item) {
                    results += "<li id='t'>"+item.Description+"</li>";

                });
               $('#ResultsHolder').html("<ul>"+results+"</ul>");

            });

        });

初めて li 要素をクリックすると、すべて正常に動作し、結果が得られます。これらの結果は別の li のセットであり、同じように動作させたいのですが、生成された li をクリックしても関数は実行されません。

なぜこうなった?jQueryが動的に挿入されたli要素を認識しないのはなぜですか?

前もって感謝します!

4

6 に答える 6

7

.click()ライブ ハンドラーではなく、実行時に DOM に存在する要素にイベントをバインドするだけです。イベントをライブにしたい場合は、.on()などの別のハンドラーを調べる必要があります。

于 2012-04-10T13:33:25.360 に答える
7

イベント ショートカット ( 、click、 などhover) を使用すると、ページの読み込み時に DOM で使用できるイベントに対してのみ機能します。要素を動的に追加しているため、ページで常に使用可能な要素にイベント リスナーを委譲する必要があります。

以下の例では、 を使用してい#ResultsHolderます。

$("#ResultsHolder").on("click", "li", function(){
    var item = $(this).html();
    $.getJSON('fSearch.php',{sTerm: item}, function(data){
        var results='';
        $.each(data, function(i, item) {
            results += "<li id='t'>"+item.Description+"</li>";
        });
        $('#ResultsHolder').html("<ul>"+results+"</ul>");
    });
});

これは、jQuery 1.7 以降で機能するはずです。古いバージョンの jQuery の場合は、delegate()...

$("#ResultsHolder").delegate("li", "click", function(){ ...

また、追加されたすべてのli要素にidは 't' があります。ID は一意である必要があるため、これは無効なコードになります。グループ識別子が必要な場合は、代わりにクラスを使用してください。

于 2012-04-10T13:34:56.133 に答える
1

("li").click() を呼び出すと、イベントが既存の li 要素にバインドされます。新しい li 要素を作成するときは、それらをイベントにバインドして、クリックが機能するようにする必要があります。

だから、あなたのループをもっとこのようなものに変更してください...

 $.each(data, function(i, item) {
    var li = $('li').text(item.Description);
    $(li).click(function(e) {  loadChildren(this); });
    $("#ResultsHolder").append(li);
});         
于 2012-04-10T13:32:44.980 に答える
0

.click 機能をすべての li にバインドするのは、この新しいものが作成される前に行われたためです。JQuery には .on() 関数があり、問題を解決できます。

$("li").on("click", function(event){
// do functionality
});
于 2012-04-10T13:37:55.090 に答える
0

ページに追加された 'li' 要素には、クリック イベント ハンドラーにバインドされた関数がありません。これを行うには、jQuery の live() 関数を使用する必要があります。

http://api.jquery.com/live/

基本的に .click(function(){}) ではなく、 .live("click",function(){}) を実行する必要があります

于 2012-04-10T13:34:53.133 に答える
0

.delegate()を使用します。$(document).delegate("li","click",function(){...})

または、新しいバージョンの.on() $('li').on("click",function(){...})

あなたのliがいくつかの固定divにある場合document、最初のスニペットをそのdivのセレクターに置き換えることで高速化できます。そして2つ目を作る$(SELECTOR).on("click","li",function(){...})

于 2012-04-10T13:36:58.243 に答える