Нажмите в диалоговом окне jQuery UI, вызванном несколько раз

Question

Нажмите в диалоговом окне jQuery UI, вызванном несколько раз

0

У меня странная проблема с кнопкой удаления в диалоговом окне jQuery. Что должно произойти, так это то, что после нажатия кнопки удаления он просматривает значение кнопки скрытого ввода и отправляет это значение на вызов ajax для удаления содержимого. Поэтому каждый клик должен показывать только один идентификатор, принадлежащий последней нажатой кнопке.

Что на самом деле происходит с первым щелчком мыши, что он показывает правильное значение. Но когда вы затем щелкните по следующей кнопке, сначала будет отображаться предыдущий идентификатор, а затем новый идентификатор, поэтому вызов ajax выполняется дважды. Если вы нажмете на третью кнопку, она отобразит три идентификатора и сделает три вызова ajax, что не должно произойти. Он должен придерживаться одного вызова ajax с каждым щелчком и показывать только последний идентификатор.

Вы можете увидеть пример здесь: http://jsfiddle.net/uF5fX/11/, с идентификаторами, показанными на консоли. Любые идеи о том, что я делаю неправильно, и как это исправить?

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

Обычно, когда срабатывает несколько кликов, оно может быть исправлено с возвратом false или preventDefault/stopPropagation, но это не имеет никакого значения здесь?

tijmen 14 дек. 2013, в 14:50

Источник

0

Вы вкладываете обработчики, простым решением было бы отсоединить вложенные обработчики перед повторным связыванием, но это не совсем то, как вы должны устанавливать обработчики: jsfiddle.net/uF5fX/12 Лучше было бы изменить логику, не вкладывая ни одного обработчика.
A. Wolff 14 дек. 2013, в 13:08

Теги:

javascript

jquery

2 ответа

0

Более структурированный способ приблизиться к этой проблеме будет определять стандартные действия для вашего закрытия и Отменить событие в диалоговом окне.

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"), он будет добавляться только один раз вместо увеличения количества привязок. Затем он отключается каждый раз, когда диалог закрывается (и отменяется, так как он вызывает событие закрытия).

Adam Touhou 19 июнь 2018, в 06:44

Ещё вопросы

Вы вкладываете обработчики, простым решением было бы отсоединить вложенные обработчики перед повторным связыванием, но это не совсем то, как вы должны устанавливать обработчики: jsfiddle.net/uF5fX/12 Лучше было бы изменить логику, не вкладывая ни одного обработчика.

yoyo · Accepted Answer · 2013-12-14T11-26-00.000Z

Каждый раз, когда вы нажимаете "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;
    });