Ajax 호출이 Jquery 토글 기능을 깨고 있습니다.

항목을 처음 클릭하면 아약스 게시물을 보내고 두 번째 클릭하면 두 번째 다른 아약스 게시물을 보냅니다. 기본 토글 기능이 있습니다.Ajax 호출이 Jquery 토글 기능을 깨고 있습니다.

문제는 일단 ajax 호출을 수행하면 두 번째 토글 함수가 더 이상 실행되지 않습니다.

토글에서 ajax 함수를 제거하고 기본 표시/숨기기 div로 바꿨을 때 첫 번째 및 두 번째 클릭이 제대로 작동했습니다.

당신은 내가 테스트 목적으로, 첫 번째 클릭에 대한 기본 표시/숨기기 기능을 알 수 있습니다 :

다음은 내 코드입니다. 이 코드를 사용하면 첫 번째 클릭이 작동하고 두 번째 클릭이 작동하고 ajax 호출이되지만 아무 것도하지 않으면 클릭이 발생합니다.

//Sort by Instrument ACS or DESC 
$("th#seeking").toggle(function() 

    { // first click update sorting order 


$("a.add_listing").hide(200); 
$("a.add_listing").show(200); 

    }, 
    function() 
    { // On second Click toggle opposite sorting order 


    $.ajax({ 
     type: "POST", 
     url: "ajax_calls.php", 
     data: "order=instrument_asc&sort_item=true", 
     success: function(r){$("#listings").html(r);}, 
     error: function(){alert(2);$("#error").text("Could not retrieve posts").fadeIn(300).delay(900).fadeOut(300)} 
    }) 





    });

이 문제에 대한 도움은 매우 감사하겠습니다. 많은 감사

출처

2011-03-28 Levi

당신은 콘솔에 오류를받을 수 있나요? –

"#listings"이 무엇이든 테이블 헤더 *가 * 안에 있습니까? 즉, 토글이 처음 설정된 HTML 대신 AJAX 응답이 사용됩니까? – Pointy

@felix firbug에 오류가 표시되지 않습니다. 두 번째 클릭 직후 아무런 추가 클릭도 발생하지 않습니다. – Levi

클릭 한 요소가 포함 된 페이지 부분이 AJAX 결과로 대체되면 처리기가 손실됩니다. (당신을 설정

$(function() { 
    var toggleState = 0; 
    $('body').delegate('th#seeking', 'click', function() { 
    if (toggleState === 0) { 
     $("a.add_listing").hide(200); 
     $("a.add_listing").show(200); 
    } 
    else { 
     $.ajax({ 
     type: "POST", 
     url: "ajax_calls.php", 
     data: "order=instrument_asc&sort_item=true", 
     success: function(r){$("#listings").html(r);}, 
     error: function(){ 
      alert(2); 
      $("#error").text("Could not retrieve posts") 
      .fadeIn(300).delay(900).fadeOut(300) 
     } 
     }); 
    } 
    toggleState = toggleState^1; 
    }); 
});

는 "클릭"처리기를 명시 적으로 토글 상태를 추적하지만,이 <body>까지 거품으로 이벤트에 핸들러 작업을합니다 : 당신이 대신 같은 뭔가를 할 수 원한다면 핸들러를 DOM에 더 가까운 컨테이너에 둘 수 있습니다.) 따라서 페이지 조각을 바꾸더라도 새 조각의 테이블 머리글에 "id"값이있는 한 위임 된 이벤트 핸들러는이를 보게됩니다.

편집 — 나는 약간이가 "준비"핸들러에서 수행되어야 함을 표시하는 것으로, 또는 다른 방법으로 <body> 요소가 DOM에 같은 존재로 변경. 코드가 "ready"또는 "load"핸들러로 설정되지 않고 의 <script> 블록에서 실행될 경우 <body>은 존재하지 않으며 아무 것도 수행하지 않습니다.

편집 다시 — Here는 위조 업 데모입니다. 그 위드에 고정되어있는 위의 코드 (위의 "누락")에 큰 부분이 있음)가 여기에서도 수정 될 것입니다.

출처

2011-03-28 15:17:50 Pointy

감사, 무리가, 이해가 되네. 하나의 문제지만, 위의 코드는 나를 위해 작동하지 않습니다. onlclick 이벤트에 위의 함수를 첨부해야합니까? – Levi

"delegate"호출은 핸들러를 설정해야합니다.불행히도 (아약스 부분 때문에) jsfiddle에서 작동하는 것을 보여주는 것은 다소 까다 롭습니다. 코드는 jQuery "ready"핸들러에서 실행되어야합니다. 나는 그것을 반영하기 위해 답을 편집 할 것이다. – Pointy

다시 한번 감사드립니다. 나는 document.ready 함수 안에있다. "위의 코드를 추가 할 때 불량배에 오류가 발생했습니다."누락 된 대괄호를 추가하려고 시도했지만 오류가 있지만 코드는 여전히 작동하지 않습니다. 어떤 아이디어? 시간과 도움을 주셔서 다시 한번 감사드립니다. – Levi

내가 대답은 여기에서 보이는 것처럼, 좋은 솔루션이 될 것 jquery.live()를 사용하여 생각했을 것이다 : Using jQuery .live with toggle event

출처

2011-03-28 15:40:41

Ajax 호출이 Jquery 토글 기능을 깨고 있습니다.

답변

관련 문제