Функция Jquery не загружается после обновления div с использованием Ajax - PullRequest
Новая
       2

Функция Jquery не загружается после обновления div с использованием Ajax

1 голос
/ 09 ноября 2011

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

Вот мой код для div обновления Ajax: 

<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>

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

Ответы [ 4 ]

1 голос
/ 01 августа 2014

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

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();

            }

        });

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

Спасибо

1 голос
/ 09 ноября 2011

Ваш код должен работать, если вы измените .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() как .bind(), .live() и .delegate() амортизируемые: http://api.jquery.com/on/

1 голос
/ 09 ноября 2011

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

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

Надеюсь, эта помощь:)

0 голосов
/ 09 ноября 2011

Как @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();
}
});
...