Autor Zpráva
PetrB
Profil *
Zdravím,
pracuji na osobním nekomerčním projektu a potřeboval bych poprosit o malou radu.

Vytvořil jsem si stránkování pomocí AJAXu a u každého načteného záznamu mám element volající druhý AJAX, který daný záznam vybere (či odebere) do oblíbených položek.

Problém je v tom, že druhý AJAX se nezavolá z elementů, které jsou zobrazené prvním AJAXem. Zkoušel jsem měnit události, i implementovat callback funci, ale nepodařilo se mi dosánout kýženého efektu.

Mohli byste mi poradit jak se toto řeší?

Kód používaný pro stránkování:
<script>    
var page = 2;
var items_per_page = 10;
$("#fetch_results").on('click', function(){ 
  var results_in_total= <?php echo $isas_deals_in_total; ?>;
  var last_page = Math.ceil(results_in_total/items_per_page);
  
  $.ajax({
    type: "GET",
    url: 'search_AJAX_pagination.php',
    contentType: 'application/json; charset=utf-8',
    data: {
      data: <?php echo json_encode($_POST); ?>,
      page: page
    },
    
    beforeSend: function(){
      $("body").addClass("loading");
    },
    
    success: function(data){  
      setTimeout(function () {  
        $("#result_list").append(data);  
      }, 400);        
      
      if(last_page == page){
        $("#fetch_results").hide();          
      } else {
        page += 1;
      }
    },
    
    complete: function(){   
      setTimeout(function () { 
        $("body").removeClass("loading");
      }, 600);  
    }
  });   
});
</script>
 
Kód pro přidávání/odebírání oblíbených položek:
 $(".btm_compare").on('click',function(){   
    var $id_isa = (this.id); 
    var $id_indicator = $('.favorites_count');
    
    var $el_btn = document.getElementById($id_isa);
    var $el_row = document.getElementById('row-'+$id_isa);
    
    $.ajax({
      url: 'ajax__update_favorite.php',
      type: "GET",
      data: {id_isa: $id_isa},
      success: function(data) {
        $id_indicator.html(data);        
        
        // Change button style
        if (hasClass($el_btn, 'add') === true){ 
          ....
        }        
      }
    });
Kajman
Profil
Takto zapsaným on navěsíte hlídání události pro aktuálně nalezené elementy.

Ale můžete navěsit událost na nějakého předka a kontrolovat, zda odpovídá zaměření. Tedy delegovat tu událost. To pak bude fungovat i na nově přidané elementy do toho předka.

Tedy bude stačit upravit kód pro přidávání/odebírání na něco jako
$("#result_list").on("click", ".btm_compare", function(){ 
...

Viz api.jquery.com/on
PetrB
Profil *
Kajman:
Super. Už chápu jak to funguje.
Díky moc.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0