web-dev-qa-db-ja.com

jqueryクリックは、ajaxで生成されたコンテンツでは機能しません

$(".button").on("click", function(){ });を使用しています

コンテナ上にあるボタンをクリックすると、ajax呼び出しが行われ、コンテンツが新しいもので更新され、.buttonをクリックしようとしても機能しません...クリックしても何も返されませんボタン。

私も試しました

$(".button").live("click", function(){ });

または

$(".button").click(function(){ });

どうすればそれを機能させることができますか？

編集：私のhtml：

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>
jqueryajaxclicklive
76
fxuser

この方法で行う必要があります。

$('body').on('click', '.button', function (){
        alert('click!');
    });

Ajaxリクエスト中に変更されないコンテナがある場合、これはよりパフォーマンスが高くなります。

$('.container').on('click', '.button', function (){
        alert('click!');
    });

デリゲートイベントは、動的要素を含む最も近い静的要素に常にバインドします。

148
gdoron

わかりました。1つのパラメーターが欠落していたため、.on（）関数を正しく使用して問題を解決しました。

の代わりに

$(".button").on("click", function() { } );

私は使った

$(".container").on("click", ".button", function() { } );
40
fxuser

の代わりに：

$(".button").on("click", function() { } );

私が使用した：

$(".container").on("click", ".button", function() { } );

私はこれを使用しましたが、うまくいきました。

8
Macc

これはあなたがやろうとしていることですか？注：親に$.on()を配置していますが、アクションに.buttonを選択しています。

.on（events[、selector][、data]、handler（eventObject））

selectorイベントをトリガーする選択された要素の子孫をフィルタリングするセレクタ文字列。セレクタがnullまたは省略されている場合、イベントは選択された要素に到達したときに常にトリガーされます。

http://api.jquery.com/on/

<div id="stuff">
    <button class="button">Click me!</button>
    <p>Stuff</p>
</div>

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html();

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        $stuff.empty();
        console.log($stuff.html());
        alert($stuff.html()); // Look behind, #stuff is empty.
        $stuff.html(ajaxContent);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/1

別のデモ：

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html(),
    $ajaxContent,
    colors = ['blue','green','red'],
    color = 0;

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        color++;
        if (color == colors.length) color = 0;
        console.log($stuff.html());
        alert($stuff.html());
        $ajaxContent = $(ajaxContent);
        $stuff.append($ajaxContent).css('color', colors[color]);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/2/

3
Jared Farrish