Ajax 호출 후 Jquery 이벤트가 실행되지 않습니다.

Ajax 호출 후 Jquery 이벤트가 실행되지 않습니다.

---

이것은 jquery의 다소 이상한 문제입니다. div를로드 중입니다.

<div id="container">

페이지로드시. 각 레코드는 연관된 'delete'ajax 함수가있는 테이블 형식 데이터입니다. 페이지가로드되고 '삭제'링크를 클릭하면 ajax 호출이 정상적으로 실행됩니다. 그러나 이벤트가 시작되면 데이터가 ajax 호출에서 반환되고 div가 데이터로 채워지지만 페이지가 새로 고쳐 지거나 다시로드되지 않습니다. 링크를 다시 클릭하면 ajax 스크립트가 실행되지 않습니다. 내 코드는 다음과 같습니다.

$(document).ready(function() {
    $("button.done").button({
    }).click(function() {
        var BatchID = $("input#BatchID").val();
        var Amount = $("input#Amount").val();
        var Name = $("input#CheckName").val();
        var Check_Number = $("input#Check_Number").val();
        var Company = $("select#Company").val();
        var Department = $("select#Department").val();
        $.ajax({
            type: 'GET',
            url: '/app/usagCheckEntryWS.html',
            data: {
                "BatchID" : BatchID,
                "Amount" : Amount,
                "Name" : Name,
                "Check_Number" : Check_Number,
                "Company" : Company,
                "Department" : Department
            },
            success: function (data) {
                    var ang = '';
                    var obj = $.parseJSON(data);
                    $.each(obj, function() {
                       ang += '<table><tr><td width="45">' + this["RefID"] + '</td><td width="140">' + this["Name"] + '</td><td width="95">' + this["CheckNumber"] + '</td><td align="right" width="70">$' + this["Amount"] + '</td><td width="220" style="padding-left: 15px;">' + this["Description"] + '</td><td><div class="delete" rel="' + this["RefID"] + '"><span>Delete</span></div></td></tr></table>';
                    });
                    $('#container').html(ang);
                    $("input#Amount").val('');
                    $("input#CheckName").val('');
                    $("input#Check_Number").val('');
                    $("select#Company").val('MMS');
                    $("th#dept").hide();
                    $('input#CheckName').focus();
            }
        });
    });
});

---

요소를 제거한 다음 자바 스크립트를 통해 교체하면 페이지로드시 추가 된 이벤트 바인딩이 손실됩니다.

(이는 또한 페이지로드 후 페이지에 추가 된 콘텐츠 (예 : ajax로드 콘텐츠)에도 적용됩니다.)

이에 대한 몇 가지 가능한 해결책이 있습니다.

1) "바인딩"코드를 캡슐화하고 페이지로드시와 해당 요소가 페이지에 다시 추가 된 직후에 호출합니다. 예를 들면 :

$(document).ready(function(){
    // bind event handlers when the page loads.
    bindButtonClick();
});

function bindButtonClick(){
    $('.myClickableElement').click(function(){
        ... event handler code ...
    });
}

function updateContent(){
    $.ajax({
        url : '/ajax-endpoint.php',
        data : {'onMyWay' : 'toServer'},
        dataType : 'html',
        type : 'post',
        success : function(responseHtml){
            // .myClickableElement is replaced with new (unbound) html element(s)
            $('#container').html(responseHtml);

            // re-bind event handlers to '.myClickableElement'
            bindButtonClick();  
        }
    });
}

2) 이것을 처리하는 더 우아한 방법 : jQuery의 .on () 메소드를 사용하십시오 . 이를 통해 이벤트 대상이 아닌 다른 요소, 즉 페이지에서 제거되지 않는 요소에 이벤트 핸들러를 바인딩 할 수 있습니다.

$(document).ready(function(){
    $('body').on('click','.myClickableElement',function(){
        ... event handler code ....
    });
});

추가 설명 :

이 .on()메서드는 이벤트 위임 을 사용 하여 이벤트 처리기 코드 (세 번째 인수)를 유지하도록 부모 요소에 지시하고 이벤트 대상 (두 번째 인수)에 특정 유형의 이벤트 (첫 번째 인수)가 수행 될 때 실행합니다.

If you are using a version of jQuery prior to 1.7 use the now deprecated delegate method which essentially does the same thing.

Also, it is worth noting that because of the way events "bubble up" through the dom tree, the event target (2nd argument of .on() method) must be a descendant of the delegating element (jQuery object's selector). For example, the following would NOT work

<div id="container-1">
    <div>
        <div id="another-div">
            Some Stuff
        </div>
    </div>
</div>

<div id="container-2">
    <a id="click-me">Event Target!!!</a>
</div>

<script type="text/javascript">
    $('#container-1').on('click','#click-me',function(){
        ... event handler code ....
    });
</script>

The body or document elements are usually safe choices since typically every element on the page is a descendant.

---

You can enclose the event script in DIV and run a Replaceall command after dynamically loading the content.

<div class="somescript">
-- Event Script that you want to map with dnamically added content
<div>

-- Dynamically load your content and run the below command after it.

$(".somescript").replaceAll($(".somescript"));

Once the dynamically loaded content is loaded and replace command has been run, the events will be mapped and code will run fine.

---

My comment is too long, sorry.

Just a question and a comment, although I see that this is an old post. I have had a lot of trouble using: $(document).on('click', '#xxx", function(e) { }); to attach handlers to content returned using AJAX, vs. using a function () { $('#xxx).on('click', function(e) { }); } and calling that after the AJAX call returns with success. Is there some sort of trick or guideline for using that method ? I get the delegation involved, and I have tried using that but it does not often work. I could try delegating to the enclosing element. Maybe it does not bubble up to the document or the body for some reason ?

참고URL : https://stackoverflow.com/questions/13767919/jquery-event-wont-fire-after-ajax-call