Ajax를 사용하여 div를 새로 고친 후 Jquery 함수가로드되지 않습니다.

사용자가 페이지에서 링크를 클릭 한 후 Ajax를 사용하여 새로 고친 div가 몇 개 있습니다. 아약스는 DIV 새로 고침에 대한Ajax를 사용하여 div를 새로 고친 후 Jquery 함수가로드되지 않습니다.

여기 내 코드입니다 :이 같은 페이지에

<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 만 다시로드되고 전체 페이지가 아니기 때문에이 함수를 "다시로드"해야한다고 생각합니다. div를 새로 고친 후이 Jquery 함수를 어떻게 유지할 수 있습니까?

출처

2011-11-08 DanielOlivasJr

너무 '호버 (hover)'이벤트에 'live'를 사용해야하는 것처럼 보입니다. –

로드의 콜백 함수를 사용해야합니다.로드 완료 후 jquery를 다시 호출해야합니다.

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

희망이 도움 :)

출처

2011-11-08 23:16:31 shennyL

구문이 올바른가? 오류가 발생했습니다. – DanielOlivasJr

안녕하세요, http://api.jquery.com/load/를 참조하십시오. 코드는 여기에 제가 참조로 표시합니다. 구문에 대한 확인이 부족하지만 비슷한 상황을 해결합니다 :) – shennyL

예! 고마워요. 그랬어. – DanielOlivasJr

@Guillaume 시스코는 동적으로 DOM 요소를 삽입하는 호버 효과를 리 바인드해야 코멘트에 언급 한 바와 같이, 당신은

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

출처

2011-11-08 23:21:20 Rafay

죄송합니다. 작동하지 않았습니다. .item_control_box가 호버에 표시되어야하고 그렇지 않습니다. – DanielOlivasJr

처럼 그것을 할 수 있습니다 당신이 .live()에 .bind() 통화를 변경하는 경우

코드는 작동합니다 :

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

http://api.jquery.com/delegate/

이벤트 핸들러를 연결, http://api.jquery.com/live/ :

.hover()는 .bind('mouseover', function() {...}) 및

당신이 아직 DOM을 당신이 .live() 또는 .delegate()를 사용할 수있는 요소에 이벤트 처리기를 바인딩 할 .bind('mouseout', function() {...})를 사용하는 것과 같은 일입니다 현재 선택자와 일치하는 모든 요소에 대해 현재 및 미래에

는 jQuery를 1.7로서 당신은, .on() .bind()로 .live()를 이용해야하고, .delegate()는 감가 상각 : 다음 넣어 http://api.jquery.com/on/

출처

2011-11-08 23:37:04 Jasper

이것이 제가 취해야하는 경로라고 생각합니다.하지만 코드를 업데이트하고 div 위로 마우스를 가져 가면 표시되지 않습니다 .item_control_box – DanielOlivasJr

더 나은이 이름

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({ 
      url: 'your_php_file.php', 
      type: 'POST', 
      data:formData, 
      success: function(response) 
      { 

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

        effectLoad(); 

      } 

     });

희망이 있습니다.

고마워요.

출처

2014-08-01 15:40:02 sazedul

Ajax를 사용하여 div를 새로 고친 후 Jquery 함수가로드되지 않습니다.

답변

관련 문제