이 jQuery ajax 클릭 이벤트가 여러 번 발생하는 이유는 무엇입니까?

이 jQuery ajax 클릭 이벤트가 여러 번 발생하는 이유는 무엇입니까?

클릭 이벤트 바인딩 해제를 시도해보았지만 때로는 2번, 때로는 5번 발생하기도 합니다.이제 좀 진저리가 나요!

코드 출처:modal.asp

$("input[name=add_associate]").live("click",function(){
    var addassociateID = $(this).attr("id")

    $.ajax({
       type: 'POST',
       url: '/data/watchlist_save.asp',
       data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
       async:true,
       success: function(data) {
           $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",
           {cache:false},function() {
               $(".search_note").html(data)         
               $(this).unbind('click').bind('click',handler);                                                                                                
           })
       },
       error: function(data){
           $(".search_note").html(data)
       }
    });     
})

업데이트:
기본적으로 나는 다음 코드를 호출합니다..associate_users

<div id="associate_list">
    <div class="associate_record">
        <div class="left" style="padding:8px;"><img src="../imgs/nopic-m.png" style="width:30px;height:30px;" class="img_border" /></div>
        <div class="left" style="padding-top:15px;">5)Neil Burton</div>
        <div class="right" style="padding-top:10px;margin-right:5px;"><input type="button" class="btn-blue" name="add_associate" id="890" value="Add"></div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>

자세한 정보:
이벤트를 실행하고 모드 대화 상자를 닫은 후 다른 항목으로 다시 열 때만 발생합니다.watchListID

데이터 구조:

• main.asp: LOADS >
• modal.asp: modal.asp에는 panel1.asp 및 panel2.asp 데이터가 포함된 위 + 두 div의 jquery가 포함되어 있습니다.
• panel1.asp: 위의 HTML을 포함합니다...
• panel2.asp: 관련된 내용이 없습니다...그냥 순수한 HTML.

세미콜론을 조심하고, 각각의 명령을 하나로 끝내면 나중에 두통을 피할 수 있습니다.

에 의해 구속되는 사건들에 관해서는live(), 그들은 전화를 함으로써 구속되지 않아야 합니다.die(). 다음과 같은 매개 변수를 갖습니다.unbind(). 설명서를 한 번 보세요.

function ajaxHandler(){
    var addassociateID = $(this).attr("id");
    var $this = $(this);
    $this.die('click');

    $.ajax({
        type: 'POST',
        url: '/data/watchlist_save.asp',
        data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
        async: true,
        success: function(data) {
            $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",{cache:false},function(){
                $(".search_note").html(data);
                $this.bind('click',handler);
            });
        },
        error: function(data){
            $(".search_note").html(data);
            $this.live('click', ajaxHandler);
        }
    });     
}

$("input[name=add_associate]").live("click", ajaxHandler);

편집: 몇 가지 중요한 점을 추가하는 것을 잊었습니다.@stefan이 제안한 것처럼 클릭 핸들러에서 라이브 이벤트를 바로 바인딩 해제하고 오류가 발생하면 다시 바인딩해야 합니다.

또한 당신이 저장해두도록 하세요.thisajax callback 함수 내의 DOM 요소를 가리키는 것이 아니기 때문에 변수의 object.또는 사용할 수 있습니다.context당신의 ajax 요청에 대한 property, 문서를 확인하세요.

내가 보기에, 당신이 원하는 것은 이벤트를 한 번 묶은 후 죽는 것뿐입니다.최신 jQuery 버전에는 .one() 메서드가 있으며 이벤트를 한 번만 바인딩합니다.

예:

$('#myDiv').one('click', function() {
    alert('clicked once...');
});

다음 번 클릭할 때 클릭 이벤트가 실행되지 않습니다.

자세한 내용은 http://api.jquery.com/one/ 에서 확인할 수 있습니다.

사용하던 이 문제는 이제 해결되었습니다.

$(document).ready

...와 함께 적재된 아약스 내용에.

<script src="/js/jquery-ui.js"></script>

그래서 저는 그것이 "라이브" 기능을 두 배로 늘렸다고 생각합니다!

답변해주셔서 정말 감사합니다.

이것은 도움이 될 것입니다 - http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

두 가지 방법으로 문제를 해결할 수 있습니다.

1) modal.asp가 아닌 main.asp로 javascript 코드를 이동합니다.

이렇게 하면 이중 화재 문제가 즉시 해결됩니다.WatchList를 풀려면 코드를 약간 수정해야 합니다.main.asp는 사용자가 직접 코딩하는 것이 아니라 modal.asp 내부의 일부 HTML에서 ID 값을 지정합니다(main.asp는 아직 그 값을 가지고 있지 않기 때문에)

2) javascript 코드는 그대로 두되 라이브 이벤트 사용은 중지합니다.

".live('click'), function() {" 대신 간단한 ".click(" 함수" {" 호출")을 사용합니다.

대화상자가 열릴 때마다 modal.asp를 다시 로드하는 것이며, 이는 자바스크립트가 로드될 때마다 실행되고 있음을 의미합니다.javascript 코드를 modal.asp에 보관한다면 live()는 적합하지 않을 수 있습니다.

당신은 성공한 후에 먼저 구속력이 없습니다.클릭 핸들러에서 바인딩을 해제한 다음 오류가 발생하면 다시 추가해야 합니다.

이렇게 풀었어요.

    var liveActionRemove = $('#ajax-list-action-remove');

    $(liveActionRemove).live('click', function(){
        $(liveActionRemove).die('click');

        $.ajax({
            url: '/someurl',
            success: function(data){
            }
        });
    }); 

function myEventHandler(e)
{
    if(e.handled !== true)
    {
      // put your payload here.
      // this next line must be here
      e.handled = true;
    }
    return false;
}

이벤트가 처리되면 처리된 속성을 true로 설정할 수 있습니다.따라서 코드에 컨트롤을 전달하기 전에 여전히 거짓인지 확인하십시오.여기서 이걸 찾았는데 효과가 있었어요.

언급URL : https://stackoverflow.com/questions/6120943/why-is-this-jquery-ajax-click-event-firing-multiple-times