Jquery не должны быть перезарядка

Question

У меня есть эта страница

page

Если вы идете туда, вы увидите продукты и рядом с каждым продуктом на левом является более кнопкой. Нажав на эту кнопку, вы получите прокрутку, которая отлично работает.

На верхнем конце находится выпадающее окно, на котором я загружаю Jquery, который обновляет всю страницу новым контентом ... если вы нажмете на тем больше снова после того, как вы выберите верхний выпадающий список для любого типа «Быстрое питание Pos станции» прокрутки не работает больше ... Я в потерять, почему это происходит

$("#main_content").load("function.php?type="+type+"piz&count=5"); 

это вызов, который стреляет когда пользователь выбирает выпадающий список

вот код для переключения

// blue item expand 
$('.item-blue .btn-expand').click(function() { 

    var btn = $(this); 
    $(this).parent().prev().slideToggle(function() { 
     btn.toggleClass('btn-expand-h'); 
    }); 
    return false; 
}); 

Answer 1

Вы пересвязать событие, обрабатывающий щелчок на «больше» ...

Вы обязан его на Load случае документа, но вы не добавляете его щелчок меню ...

$('.select-big ul li a').click(function() { 
    // your code..... 

    // asynchronous task wrong way... 
    $("#main_content").load("function.php?type="+type+"&count=5"); 

    // this is the right way... 
    $("#main_content").load("function.php?type="+type+"&count=5", function(){ 
     $('.item-blue .btn-expand').click(function() { 
      var btn = $(this); 
      $(this).parent().prev().slideToggle(function() { 
       btn.toggleClass('btn-expand-h'); 
      }); 
      return false; 
     }); 

     // plus any other code you need to run once 
     // the data from the server is "served" 
    }); 

    // your code... 
}); 

Ваше добавление новых элементов в DOM после document.load события произошло. Таким образом, событие, связывающее события с ссылкой «больше», уже протекало против «оригинальных» DOM элементов ...

Answer 2

Я угадываю, потому что, когда вы перезагружаете контент, вы не переустанавливаете обработчики событий для содержимого, которое вы заменяются.

Изменить ваш:

$("#main_content").load("function.php?type="+type+"piz&count=5"); 

к:

var successCallback = function(responseText, textStatus, XMLHttpRequest) { 
    // rebind your event handlers here 
    $('.item-blue .btn-expand').click(function() { 
     var btn = $(this); 
     $(this).parent().prev().slideToggle(function() { 
      btn.toggleClass('btn-expand-h'); 
     }); 
     return false; 
    }); 
}; 

$("#main_content").load("function.php?type="+type+"piz&count=5", successCallback); 

Хорошо выглядит сайт кстати :)

Answer 3

Поскольку вы используете JQuery 1.4.x, взгляните на live() метод JQuery в , Это позволит вам избежать необходимости повторной обработки вручную после загрузки AJAX. Таким образом, ваш код может быть изменен, чтобы быть просто:

$('.item-blue .btn-expand').live('click', function() { 
    var btn = $(this); 
    $(this).parent().prev().slideToggle(function() { 
    btn.toggleClass('btn-expand-h'); 
    }); 
    return false; 
}); 

Он будет автоматически перепривязывают события после того, как ваша нагрузка имеет место. live() находится в jQuery начиная с версии 1.3.