Событие, связанное с методом on jQuery, запускается только один раз

Question

хорошо, я знаю, что название может звучать мисс лидирующий, но терпите меня ...

У меня есть следующий код, который я использую с намерением повторно использовать пару узлов для создания простого диалога да / нет:

var myDialog = function(e) {
    if(myDialog.dialog === undefined){
        var container = $('<div><h2>Are you sure you want to delete this Item?</h2></div>'),
            yesBtn = $('<input type="button" value="Yes" id="yesBtn"/>').appendTo(div),
            noBtn =  $('<input type="button" value="No" id="noBtn"/>').appendTo(div);

       myDialog.dialog = container; 
       $('#yesBtn').on({ click: function(e) { console.log('Yes'); } } );
       $('#noBtn').live('click', function(e) { console.log('No'); });
    }

    //I am using a third party lib called facebox to create the showbox
    $.facebox(myDialog.dialog);
};

Затем эта функция используется кнопкой, которая при нажатии отображает диалоговое окно (правильно каждый раз), и при первом нажатии кнопки «да / нет» работают правильно, но когда диалоговое окно отображается снова, нет из двух событий пожары.

Эта проблема решается, если я использую live вместо на , но я читал, что хорошей практикой является запуск используя последнее вместо первого.

Любые комментарии будут очень полезны!

Заранее спасибо.

Answer 1

Это зависит от версии jQuery, которую вы используете. Проверьте, какая у вас версия jQuery. Начиная с jQuery 1.7, вы должны использовать on Использование live устарело. Вы не можете использовать on, если вы используете 1.4.

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

И вы также используете on неправильный путь.

1. Вы передали неверные параметры.
2. Вы можете передать объект только по третьему параметру on. Вы передаете его как данные объекта.

3. Использование on означает, что вы помещаете слушателя, а затем ждете, пока это событие не всплывет до того слушателя из выбранного вами элемента DOM, таким образом, это правильный способ сделать это:

   $ (document) .on ("click", "#yesBtn", function (e) {console.log ("Yes");});

В этом случае он пузырится до document. Вы можете сделать так, чтобы событие всплыло только в контейнере #yesBtn. Вы можете обернуть #yesBtn внутри div или что-то

Answer 2

Я не думаю, что это работает, когда вы отправляете хэш опций на ()

вместо

$('#yesBtn').on({ click: function(e) { console.log('Yes'); } } );

попробуй

$('#yesBtn').on("click", function(e) { console.log('Yes'); }  );