html içeriğini almak için AJAX'ı kullandıktan sonra dinleyicileri yeni öğelere eklemenin uygun bir yolu nedir? (jQuery, Javascript)

Question

AJAX aracılığıyla yeni ayar sayfalarını yükleyebilecek bir şey yapıyorum, yeni içerik sayfasından bu öğeleri dinleyicilere bağlamanın en etkili yolunun ne olduğundan emin değilim?

İşte benim düşüncem. Dosya yolunu karşılaştıran bir işlev yapabilirim ve her koşul için, doğru dinleyicileri AJAX'ın yüklediği sayfaya dayanarak bu yeni öğelere uygulayacağım. Büyük miktarda sayfa varsa, işlevi çok büyük kılacak gibi hissediyorum.

Teşekkürler!

Answer 1

jQuery öğelerini kullanın. Olay temsilcisini işlemek için on(). Sağladığınız ilk öğe statik bir parçadır (asla çıkarılmamış/değiştirilmemiş). Birinci argüman, dedikodu yapmak, mouseover/click vb. yapmak istediğiniz etkinliktir. 2. argüman, olay gerçekleştiğinde olayın yanmasını sağlamak istediğimiz elementtir. 3. argüman, olay patladığında çalışacak fonksiyon olan geri çağrıdır.

$(document).on('event', 'elementIdentifier', function(){ 
    //your code 
}); 

Answer 2

iki yolu:

.on()

$('.some-parent-class').on('click', '.element', function() { 
    // DO STUFF! 
}); 

2), yeni elemanlar bağlama kullanarak dinamik olmayan üst kapta 1) Cilt ajax arama tamamlandıktan sonra

$.ajax(url, { 
    // ajax options 
}).done(function(data) { 
    var newEl = $('<div class="element"></div>'); 
    // Setup your newEl with data here... 
    newEl.on('click', function() { 
    // do stuff 
    }); 
    newEl.appendTo($('.some-parent-class')); 
}); 

İlk, genellikle daha hızlı ajax yanıt süreleriyle sonuçlanır, ancak ayrıca yavaş tıklatma yanıtını da düşürür.

Answer 3

Burada sorduğunuzdan emin değilim, ancak belgenizde varolan öğelere veya ileride var olacak öğelere bağlanmak için jQuery'nin .on() işlevini kullanabilirsiniz. .parent-div içindeki

$(document).ready(function() { 
    $(document).on('click', '#new-button', function() { 
     alert("You clicked the new button"); 
    }); 

    //get some HTML via ajax. Let's assume you're getting <button id="new-button">Click me</button> 
    $.get('url', function(res) { 
     $('body').append(res); 
    }); 
}); 

Answer 4

$(".parent-div").on("click", ".child-div-class-name" ,function(){ 
    somefunction(); 
}); 

tüm yeni eklenen unsurlar dinleyicileri olduğu gibi büyük Populus' cevabı, üzerine ekleme onclick

Answer 5

sahip olacaktır: Burada

kısa bir örnek İkinci seçeneğine mantıksal olarak eşdeğer bir çözüm, Promises:

 var iGotYou = new Promise(function (res, rej) { 
     $.ajax({ 
      //ajax paramaters 
     }) 
      .done(function(data) { 
       //handle the data as necessary... 
       //then resolve the Promise 
       res(); 
      }); 
    }); 

    //the Promise has been resolved 
    iGotYou.then(function (response) { 
     //add the event listener now that the promise has been fulfilled 
     document.getElementById('someId').addEventListener('click', function (e) { 
     //whatever you want to do on click event 
     }); 
    })