0

HTML の一部が ajax 呼び出しの結果に置き換えられます。テスト中、私はその ajax 呼び出しを置き換えたものとまったく同じものにしました。問題は、古い html に適用した JQuery UI と「onClick」のいずれも、新しい html に適用されなかったことです。適用した関数を再度呼び出してみましたが、うまくいきません。奇妙なことに、Google Chrome のカウンセルに直接入力すると機能します (new-ajax-html は JQuery コマンドによって影響を受けます)。

これは私のコードで、最初の html の元の設定 (動作) と 2 番目の設定 (必要なすべての要素がインスタンス化された後に行われます) を含みます。

function set_up() { // <-- if I call this function in the consul, it works.
    $('.delete-button').click(function() {
        var confirm = window.confirm("Are you sure you want to delete? After you save, this file will not be recoverable.")
        if (confirm){
            $(this).parent('.deletable-group').remove()
        }
    });
    $('.field-default[data-multi="True"]').makeMulti(); 
    $("input.field-input-date").datepicker();
    alert("HERE!") //Is reached both times I call the function. So the code above is executing.
}
var options = { 
    target:     '.server-response-box', 
    success:    function() { //<--- Gets called when the ajax call goes through.
        $('.needs-update').each(function( index ) {
            url = "/field/1/" + $('.edit-wrapper').attr('data-entry-ID') + "/" + $(this).attr('data-field-id');
            old_this = this
            $.get(url,function(data){
               $(old_this).replaceWith(data);
            });
        });
        set_up(); // Tries to set everything up again.
    },
    beforeSubmit: function(arr, $form, options) { 
    }
}; 
$('#form').ajaxForm(options);
set_up(); //<-- sets it all up the first time.
4

3 に答える 3

4

set_up(); // Tries to set everything up again.

ajaxForm 成功コールバック関数内のこの行は、すべてのGETリクエストが実行された後にのみ実行する必要があります。

var getRequests = [];
$('.needs-update').each(function( index ) {
    url = "/field/1/" + $('.edit-wrapper').data('entry-ID') + "/" +  $(this).data('field-id');
    old_this = this;
    var ajaxGet = $.get(url,function(data){
        $(old_this).replaceWith(data);
    });
    getRequests.push(ajaxGet);
});
$.when.apply($, getRequests).done(set_up); // Tries to set everything up again.

これにより、すべてのリクエストに対して遅延オブジェクトの配列が作成されGET、それらが完了するとset_up関数が呼び出されます。

編集 - の使用.attr(data-stuff)を just に変更しました.data(stuff)。注、.data()値は string/number/bool にキャストされますが、この場合はすべて string に連結されます。以下をコピーしてコンソールに貼り付けて確認します。

$(this).data('id', 1);
var x = "test" + ($(this).data('id') + $(this).data('id'));
var y = "test" + $(this).data('id') + $(this).data('id');
console.log(x); // "test2"
console.log(y); // "test11"
于 2013-06-26T16:27:46.477 に答える
3

動的に追加されるコンテンツの場合、委任されたイベント リスナーを使用する必要があります。詳細については、jQuery のon()のドキュメントを参照してください。

何かのようなもの：

$(document).on('click', '.delete-button', function() {...});

アップデート

他の人が指摘したように、$.get()非同期です。すべての呼び出しが行われた後に set_up() を呼び出していますが、必ずしもそれらが戻った後ではありません。これを行うには、カウンターを使用して返された数を追跡し、それらがすべて完了したら set_up() を呼び出します。

var needsUpdate = $('.needs-update');
var numberToUpdate = needsUpdate.length;
var numberUpdated = 0;

needsUpdate.each(function( index ) {
    url = "/field/1/" + $('.edit-wrapper').attr('data-entry-ID') + "/" + $(this).attr('data-field-id');
    old_this = this
    $.get(url,function(data){
        numberUpdated++;
       $(old_this).replaceWith(data); //update HTML

       if(numberUpdated === numberToUpdate) {
            setup(); //when all HTML added, then initialize widgets and add listeners
       }
    });
});
于 2013-06-26T16:27:27.213 に答える
0

古いバージョンの jQuery (1.6 以前など) を使用している場合は、使用してみてください

$(element).live("event", function(e) {
bla bla bla;
});
于 2013-06-26T16:46:04.260 に答える