-1

いくつかの画像を含むテーブルがあります。Ajaxが呼び出されると、前のテーブルが削除され、新しい画像を含む別のテーブルが返されます。

$("img").click(function(){
    $.post("gallery.php", function(data){
        $("#left-gallery, #right-gallery").html("").append(data);
    });
});

これが、phpファイルから情報を取得する方法です。

問題は、新しい要素が以前の要素が使用していたクリックイベントをトリガーしないことです。

テーブル内の画像をクリックすると、テーブル外のページにある別の画像に置き換わるはずです。

$("#left-gallery img").click(function(){
    $("#left-gallery td").removeClass("highlighted");

    var source = $(this).attr("src");
    $("#image1-image").attr("src", source); //replaces a big image outside the table
    $(this).parents("td").addClass("highlighted");
});

テーブル画像は次のようにネストされます：

<tr>
    <td>
        <a  href = "image.jpg"> 
            <img src = "image.jpg">
            Image
        </a>
    </td>
</tr>

デフォルトの動作を防止しても機能しません。

$("td a").click(function(e){
    e.preventDefault();
});

javascriptはとの後に<body>あり、内部にあります。クリックイベントを取得する方法や、返されたテーブルで機能する方法がわかりません。助けていただければ幸いです。
ありがとうございました。

4

1 に答える 1

3

DOM を動的に変更しているため、委任を使用する

$('#left-gallery').on('click','img',function(){
        // your code here
})

これにより、静的な #left-gallery 要素 = にイベント ハンドラーをアタッチします。次に、子孫画像からのクリックイベントをリッスンし、それらがバブルアップするときにそれらを処理します

使用しているjQueryのバージョンに応じて

$('element').live('event',function({ code here..})); // jQuery 1.3+

$('staticparent').delegate('element', 'event', function(){ code here..}); // jQuery 1.4.3+

$('staticparent').on('event', 'element', function(){ ここにコード.. }); // jQuery 1.7+

あなたがやっていました

$("#left-gallery img").click(function(){

これにより、イベントハンドラーが画像にバインドされます.domを変更した後、画像は存在しなくなります..そして、イベントハンドラーを新しく追加された画像にバインドすることはないため、クリックしても何もしませんでした

于 2013-01-11T15:57:35.117 に答える