jQuery UI 대화 상자에서 여러 번 클릭하십시오.

Question

jQuery 대화 상자의 삭제 버튼에 이상한 문제가 있습니다. 삭제 단추를 클릭하면 숨겨진 입력 단추의 값을 조회하고 해당 값을 아약스 호출로 보내어 내용을 삭제합니다. 따라서 모든 클릭에는 마지막으로 클릭 한 버튼에 속한 단일 ID 만 표시되어야합니다.

실제로 첫 번째 클릭으로 올바른 값이 표시됩니다. 그러나 다음 버튼을 클릭하면 먼저 이전 ID와 새 ID가 표시되므로 ajax 호출이 두 번 수행됩니다. 세 번째 버튼을 클릭하면 세 개의 아이디가 표시되고 세 가지 아약스 호출이 발생합니다. 클릭 한 번으로 하나의 아약스 콜을 사용하고 최신 ID 만 표시해야합니다.

http://jsfiddle.net/uF5fX/11/의 예를 콘솔에 표시된 ID와 함께 볼 수 있습니다. 내가 뭘 잘못하고 어떤 문제를 해결할 수있는 방법에 대한 아이디어? html로 일반적으로

<ul id="item-list"> 
    <li> 
     <input type="button" value="Delete" name="text" class="delete-item" /> 
     <input type="hidden" value="60" name="store_id" /> 
    </li> 
</ul> 

의

$("#item-list").on("click", ".delete-item", function(e) {  
    var dialogBox = $("#delete-confirmation"), 
     storeId = $(this).next('input[name="store_id"]').val(); 

    console.log('main clicked store id = ' + storeId); 

    dialogBox.dialog({ 
     width: 325, 
     resizable : false, 
     modal: true, 
     minHeight: 0 
    }); 

    $(".ui-dialog-titlebar").remove(); 
    dialogBox.find(".button-secondary").on("click", function() { 
     dialogBox.dialog("close"); 
    }); 

    dialogBox.find(".button-primary").on("click", function(elem) { 
     console.log('click delete btn'); 
     console.log('ajax store id = ' + storeId); 
     dialogBox.dialog("close"); 
     //make a singe ajax call with the last storeId 
     //elem.stopImmediatePropagation(); 
     elem.stopPropagation(); 
     elem.preventDefault(); 
     return false; 
    }); 

    e.stopPropagation(); 
    e.preventDefault(); 
    return false; 
}); 

구조 할 때 여러 번의 클릭이 false를 돌려 고정, 또는에서 preventDefault/인 stopPropagation 할 수 트리거하지만 여기에 차이가 없습니다?

Answer 1

'delete-item'을 클릭 할 때마다 dialogBox 버튼이 새로운 이벤트를 바인딩합니다.

dialogBox.dialog({ 
     width: 325, 
     resizable : false, 
     modal: true, 
     minHeight: 0 
    }); 

    $(".ui-dialog-titlebar").remove(); 
    var btn1 = dialogBox.find(".button-secondary"); 
    var btn2 = dialogBox.find(".button-primary"); 
    btn1.on("click", function() { 
     dialogBox.dialog("close"); 
     btn1.unbind('click'); 
     btn2.unbind('click'); 
    }); 

    btn2.on("click", function(elem) { 
     console.log('click delete btn'); 
     console.log('ajax store id = ' + storeId); 
     dialogBox.dialog("close"); 
     //make a singe ajax call with the last storeId 
     //elem.stopImmediatePropagation(); 
     elem.stopPropagation(); 
     elem.preventDefault(); 
     btn1.unbind('click'); 
     btn2.unbind('click'); 
     return false; 
    });