Question

我在jQuery对话框中有一个删除按钮的奇怪问题。应该发生的是，一旦单击删除按钮，它将查找隐藏输入按钮的值，并将该值发送到ajax调用以删除内容。因此，每次点击都应该只显示属于最后点击按钮的单个ID。

第一次点击它会发生什么，它显示正确的值。但是，当您单击下一个按钮时，它将首先显示先前的ID，然后显示新的ID，因此ajax调用将进行两次。如果你点击第三个按钮，它将显示三个id，并进行三次ajax调用，这不是应该发生的事情。每次点击都应该坚持一个ajax调用，只显示最新的id。

您可以在此处查看示例http://jsfiddle.net/uF5fX/11/，并在控制台中显示ID。关于我做错了什么的想法，以及如何解决这个问题？

$("#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;
});

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>

通常情况下，当触发多次点击时，可以使用return false修复，或者使用preventDefault / stopPropagation来修复，但这里没有任何区别？

Answer 1

每次单击“删除项目”时，对话框框按钮都会绑定另一个新事件。

    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;
    });

Answer 2

解决此问题的更有条理的方法是为对话的关闭和取消事件定义标准操作。

dialog = $( "#dialog-form" ).dialog({
  autoOpen: false,
  hide: { effect: "blind", duration: 1000 },
  show: { effect: "blind", duration: 1000 },
  height: 600,
  width: 350,
  modal: true,
  buttons: {
        Cancel: function() {
          console.log('dialog cancelled');
          dialog.dialog( "close" ); // trigger the close event
        }
      },
      close: function() {
        console.log('dialog closed');
        var btn2 = dialog.find("#create-user"); // change the #id to the name of your button
        btn2.unbind('click'); //unbind the button. 

    }
  });

下次你触发对话框并绑定on（＆＃34; click＆＃34;）事件监听器时，它只会被添加一次而不是增加绑定量。每次关闭对话框时都会解除绑定（并因为触发关闭事件而取消）。

点击jQuery UI对话框多次触发

2 个答案: