Click in jQuery UI dialog box triggerd multiple times

Question

I have a strange problem with a delete button in a jQuery dialog box. What should happen is that once the delete button is clicked, it looks up the value of the hidden input button and sends that value to an ajax call to delete the content. So every click should only show the single id that belongs to the last clicked button.

What actually happens with the first click it that it shows the correct value. But when you then click the next button, it will first show the previous id and then the new id, so the ajax call is made twice. If you would click on a third button, it will show three ids, and make three ajax calls which is not what should happen. It should stick with a single ajax call with each click and only show the latest id.

You can see an example here http://jsfiddle.net/uF5fX/11/, with the ids shown in the console. Any ideas on what I'm doing wrong, and how to fix this?

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

Structure of the 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>

Normally when multiple clicks are triggered it can be fixed with return false, or preventDefault / stopPropagation but it makes no difference here?

You are nesting handlers, a simple fix would be to unbind nested handlers before rebind it, but that's not really how you should set handlers: jsfiddle.net/uF5fX/12 Better would be to change your logic without nesting any handler — A. Wolff
– A. Wolff, Commented Dec 14, 2013 at 13:08

yoyo · Accepted Answer · 2013-12-14 13:36:33Z

Every time you click 'delete-item', dialogBox buttons bind anther new event.

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

Adam Touhou · Accepted Answer · 2018-06-19 09:21:37Z

A more structured way to approach this issue would be defining standard actions for your close and Cancel event of the dialog.

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. 

    }
  });

The next time you then trigger the dialog and bind the on("click") event listener, it will only be added once instead of incrementing the amount of binds. It is then unbound every time the dialog is closed (and cancelled since it triggers the close event).

Collectives™ on Stack Overflow

Click in jQuery UI dialog box triggerd multiple times

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related