在jQuery UI对话框中单击triggerd多次

Click in jQuery UI dialog box triggerd multiple times

本文关键字：单击 triggerd 多次 对话框 jQuery UI      更新时间：2023-09-26

我在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进行修复，但在这里没有区别？

每次单击"删除项目"时，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;
    });

解决此问题的一种更结构化的方法是为对话框的关闭和取消事件定义标准操作。

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（"click"）事件侦听器时，它将只添加一次，而不是增加绑定量。然后，每当对话框关闭时，它都会被解除绑定（并且由于它触发了关闭事件而被取消）。

相关文章：