jquery - jQueryでのライブ検索

Question

findjQueryのメソッドを使用して、ページ上の特定のボックスを検索します。

ページを更新せずに新しいボックスを作成する他のボタンがあります。これらの新しいボックスは、で見つかりませんfind。これは問題です。

私が使う：

$("fieldset#"+new_item_id).find("div.images").append(img);

liveしかし、メソッドを実装する方法も考えています。それとも私はon他のものを使うべきですか？このライブアップデートは大変です。

Answer 1

これを実現するには、イベントごとに関数を呼び出す必要があります。

function addImg( new_item_id, img ){
    $("fieldset#"+new_item_id).find("div.images").append(img);
}

すでに存在する要素については、ページの読み込み時にこれを呼び出す必要があります。追加された要素ごとに、それを再度呼び出します。したがって、次のような結果になります。

$(function(){
    $("fieldset[id]").each(function(){
        var img = //how ever you find this image...
        addImg($(this).attr('id'),img);
    });

    $('button').click(function(){
        //some ajax call
        $.ajax(
            // what ever options you have for url, data etc etc.
            success: function(response){ // assuming response is just the markup
                var $el = $(response);
                $('#content').append($el); // how ever you add this content - its probably NOT #content but you'll know that...
                var img = //how ever you find this image...
                addImg( $el.attr('id'), img );
            }
        );
    });
});

function addImg( new_item_id, img ){
    $("#"+new_item_id).find("div.images").append(img);
}

編集-関数が要素を見つけるのではなく、それを渡すだけです...

$(function(){
    $("fieldset[id]").each(function(){
        var img = //how ever you find this image...
        addImg($(this),img);
    });

    $('button').click(function(){
        //some ajax call
        $.ajax(
            // what ever options you have for url, data etc etc.
            success: function(response){ // assuming response is just the markup
                var $el = $(response);
                $('#content').append($el); // how ever you add this content - its probably NOT #content but you'll know that...
                var img = //how ever you find this image...
                addImg( $el, img );
            }
        );
    });
});

function addImg( $newEle, img ){
    $newEle.find("div.images").append(img);
}