3

動的に生成されたリスト内のアイテムをクリックしようとしましたが、$.click()関数は起動しません。

リストのHTML：

<div>
    <ul id="site_list"> </ul>
</div>

リストを生成するjQuery（意図したとおりに機能し、目的のクラス属性を持つデータの長いリストを生成します）：

var sites =[];
    $.getJSON("php/ABC.php", function(result){
        $.each(result.Sites, function(i,v){
            sites.push('<li class="site" id="site_'+ ABC + '</li>');
        });

        $('#site_list').append(sites.join(''));
    });

リストをクリックしたときにトリガーされるjQuery（機能しません...エラーをスローしません...応答に失敗するだけです。私も試し$('#site')ましたが、役に立ちませんでした。これは、私が行った方法によるものと思われます。 mを使用して生成する<ul>...何かが原因で、DOMがUL内の各要素を正しく認識できません。

$('li').click(function(){
    $(this).toggleClass("site_selected");
});
4

3 に答える 3

11 
$('#site_list').on('click', 'li', function(){
    $(this).toggleClass("site_selected");
});

動的に追加しているliため、イベントハンドラをにデリゲートする必要がありますli。

ノート

のデリゲートイベント構造.on()は次のようになります。

$(container).on(eventName, target, handlerFunction)

ここで、要素を含み、ページの読み込み時にDOMに属するをcontainer指します。Static-elementtarget

于 2012-06-18T16:20:46.843 に答える
1

上記のコードは問題ないようです。私は同じ問題に対処しましたが、コードパラドックスが頭に釘を打ちました。入力は動的に読み込まれるため、そのコードが存在する前に$（document）.ready（function（）{...}に配置すると機能しません。

このコードを入れるだけです...

    $('li').click(function(){
        $(this).toggleClass("site_selected");
    });

リストが同じ関数で動的に生成された後（ドキュメント対応関数ではない）。要素が初期化される前にオンクリック関数が作成された場合、それは失敗です。

他の方法でそれを行うことには利点があるかもしれません：

    $('#site_list').on('click', 'li', function(){

しかし、それは私にとってはうまく機能しています...

于 2016-02-18T01:30:36.023 に答える
0

「クリック」の代わりに「オン」を試してください。

$('li').on('click', function(){ $(this).toggleClass('site_selected') } );
于 2012-06-18T16:20:41.957 に答える