Блог

У меня есть несколько divs, которые обновляются с помощью Ajax после того, как пользователь нажимает на ссылку на странице.

Вот мой код для Ajax refresh div:

 <script type="text/javascript"><!-- AJAX CALL FOR MY PICTURES -->
$(document).ready(function() {
$('#pictures_wrapper a.delete_image').live('click', function(e){
     $('#pictures_wrapper').load( $(this).attr('href')   ' #pictures_wrapper' );     
     e.preventDefault(); 
}); 
});
</script>
  

На этой же странице я загружаю этот эффект Jquery:

 <script type="text/javascript"><!-- HOVER OVER ITEMS CHANGE BG COLOR -->
$(document).ready(function() {
$(".item_control_box").hide();
    jQuery('.each_item_container').hover(function() {
        jQuery(this).find('.item_control_box').show()
    }, function() {
        jQuery(this).find('.item_control_box').hide();
    });
});
</script>
  

Моя проблема заключается в том, что когда пользователь нажимает на ссылку, чтобы обновить Divs, этот эффект jquery прерывается и больше не работает. Я думаю, что мне нужно каким-то образом «перезагрузить» эту функцию, поскольку перезагружается только div, а не вся страница. Как я могу сохранить работу этой функции Jquery после обновления div?

Вы должны использовать функцию обратного вызова при загрузке, это означает, что вы отзываете jquery после завершения загрузки.

 $('#pictures_wrapper').load( $(this).attr('href')   ' #pictures_wrapper', , function () { //hover effect function } );
  

Надеюсь, это поможет 🙂

Ваш код должен работать, если вы измените свои .bind() вызовы на .live() :

 jQuery('.each_item_container').live('mouseenter', function() {
    jQuery(this).find('.item_control_box').show()
}).live('mouseleave', function() {
    jQuery(this).find('.item_control_box').hide();
});
  

.hover() это то же самое, что использовать .bind('mouseover', function () {...}) и .bind('mouseout', function () {...})

Если вы хотите привязать обработчики событий к элементам, которых еще нет в DOM, вы можете использовать .live() или .delegate() : http://api.jquery.com/live /, http://api.jquery.com/delegate /

Прикрепите обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

Начиная с jQuery 1.7, вы должны использовать .on() as .bind() , .live() и .delegate() являются устаревшими: http://api.jquery.com/on /

Лучше поместить код в пользовательскую функцию с именем

 function effectLoad(){

$(".item_control_box").hide();
    jQuery('.each_item_container').hover(function() {
        jQuery(this).find('.item_control_box').show()
    }, function() {
        jQuery(this).find('.item_control_box').hide();
    });

}
  

затем поместите функцию в вашу функцию успеха ajax

  $.ajax({
            url: 'your_php_file.php',
            type: 'POST',
            data:formData,
            success: function(response)
            {

                $("#formbox").html(response);

                  effectLoad();

            }

        });
  

Надеюсь, это сработает.

Спасибо

как упоминал @Guillaume Cisco в комментариях, вам необходимо повторно привязать эффект наведения к динамически вставляемым элементам в DOM, вы можете сделать это следующим образом

 $(".item_control_box").live(
{
mouseenter:function(){
jQuery(this).find('.item_control_box').show();
},
mouseleave:function(){
jQuery(this).find('.item_control_box').hide();
}
});