이벤트 핸들러가 다시 렌더링 HTML 후 더 이상 작동하지 않습니다

Question

I가 나의 JS 파일에 다음과 같은 구조 :

$.getJSON("data/file.json") 

.done(function(data) { 
    var loadHTMLfunction = /* some code */ 
    loadHTMLfunction(); 

    // updates display based on user filter selection 
    $("#select-section").on("change", function() { 
     $("article").find(".myClass").remove(); 
     loadHTMLfunction(); 
    }); 

    // text swap event 
    $(".summary-link").on("click", function() { 
     var el = $(this), 
     tmp = el.text(); 
     el.text(el.data("text-swap")); 
     el.data("text-swap", tmp); 
    }); 
}) 

.fail(function(jqxhr, textStatus, error) { 
    // error handling 
}); 

내 문제 내 텍스트 스왑 이벤트는 페이지가 처음로드 될 때 잘 작동하지만, 사용자가 선택 이벤트를 사용한 후에는 더 이상 작동하지 않습니다 (이 이벤트는 표시를 업데이트하기위한 선택 HTML 요소 임).

내 js 파일 구조에 문제가 있거나 내 코드 (또는 둘 다!)에 문제가 있습니까?

감사합니다.

Answer 1

당신은 기능 loadHTMLfunction에서

// text swap event 
    $(".summary-link").on("click", function() { 
     var el = $(this), 
     tmp = el.text(); 
     el.text(el.data("text-swap")); 
     el.data("text-swap", tmp); 
    }); 

을 포함해야한다.

loadHTMLfunction = function(){ 
    //your code 
    // text swap event 
     $(".summary-link").on("click", function() { 
      var el = $(this), 
      tmp = el.text(); 
      el.text(el.data("text-swap")); 
      el.data("text-swap", tmp); 
     }); 
} 

".summary-link"요소를 제거하는 일부 작업을 수행하고 있으며 처음으로 이벤트를 바인딩합니다.

Answer 2

귀하의 기능에 커플 링이 너무 빡빡하다고 생각합니다. $.getJSON.done이되면 실제로 데이터에 변수를 할당하고 Ajax 호출 범위 밖에서 이벤트 처리기를 바인딩해야합니다. 나는 당신의`loadHTMLfunction`가 표시되지 않기 때문에,

(function() { 
    var storedData; 

    $.getJSON("data/file.json", function(data) { 
     storedData = data; 
    }); 
    .error(function(jqXHR, textStatus, errorThrown) { 
     alert("error: " + textStatus + ", Description: " + jqXHR.responsetext); 
    }); 

    var loadHTMLfunction = function() { 
     // your code 
    }; 

    loadHTMLfunction(); // You ought to tell us what this function is 
         // else we don't know if it's redundant or not 
         // to run so repetitively. 

    $("#select-section").on("change", function() { 
     $("article").find(".myClass").remove(); 
     loadHTMLfunction(); // I feel like this is an issue. 
    }); 

    $(".summary-link").on("click", function() { 
     var el = $(this), 
     tmp = el.text(); 
     el.text(el.storedData("text-swap")); 
     el.storedData("text-swap", tmp); 
    }); 
}());