Как добавить функцию подтверждения к ссылкам в jQuery, чтобы диалоговое окно всегда появлялось? - PullRequest
Новая
       13

Как добавить функцию подтверждения к ссылкам в jQuery, чтобы диалоговое окно всегда появлялось?

6 голосов
/ 20 июля 2010

У меня есть HTML-таблица, которая отображает строки записей и имеет в конце столбец со ссылкой удаления. Каждая ссылка для удаления имеет класс подтверждения-удаления. Мне нужно иметь всплывающее диалоговое окно подтверждения при нажатии, и, поскольку оно используется на нескольких страницах, я создал функцию подтверждения во внешнем файле JS.

Я добавил вызов функции к щелчку ссылки, используя jQuery [код внизу поста], и он работает нормально, пока диалоговое окно не будет подтверждено после того, как [пользователь нажал OK]. Тогда функция больше не вызывается.

Я думаю, что упускаю что-то довольно простое, хотя, поскольку я не использую JS / jQuery, у меня могут быть пробелы в моих знаниях. Почему работает нормально до первого ОК? Похоже, что он хранит ссылку на результат и повторно использует ее, а не уникальную для каждой ссылки.

Вот код при использовании на странице заметок: 

$(function() {
        // Add Confirmation dialogs for all Deletes
        $("a.confirm-delete").click(function(event) {
            return fConfirmDelete('Note');
        });
});

И функция fConfirmDelete 

function fConfirmDelete( deleteObj ) {
    return confirm('Are you sure you wish to delete this ' + deleteObj + '?');
}

Ответы [ 3 ]

6 голосов
/ 20 июля 2010

После того, как пользователь нажимает ОК в первый раз, вы как-то динамически перезагружаете таблицу? Если это так, это может быть связано с тем, что событие не связано с перезагруженной таблицей. Попробуйте вместо этого обработчик событий :

jQuery 1.7 + 

$(function() {
        // Add Confirmation dialogs for all Deletes
        $(document).on('click', 'a.confirm-delete', function(event) {
            return fConfirmDelete('Note');
        });
});

jQuery 1.3-1.8: 

$(function() {
        // Add Confirmation dialogs for all Deletes
        $("a.confirm-delete").live('click', function(event) {
            return fConfirmDelete('Note');
        });
});

В исходном коде $("a.confirm-delete").click(...) будет привязывать событие только к a.confirm-delete объектам , уже находящимся в DOM . Если вы добавите новый элемент a.confirm-delete позже, событие не будет привязано к нему. С помощью обработчика событий в реальном времени jQuery событие будет связано с любыми a.confirm-delete элементами, которые существуют в данный момент, или с любыми динамически создаваемыми элементами.

3 голосов
/ 20 июля 2010

@ bradenkeith, вероятно, правильно с его ответом, но вы можете использовать jQuery немного больше и сделать диалог jQuery. 

$("a.confirm-delete").click(function(event) {
      var message = fConfirmDelete(deleteObj);
      var $dialog = $j('<div></div>')
                    .html(message)
                    .dialog({
                     autoOpen: true,
                     bgiframe: true,
                     buttons: {
                       'Dismiss': function() { $j(this).dialog('close');}
                       'Delete': function() { //Do delete things }
                     }
                     modal: true
                     // other parameters here 
                    });

  });

На мой взгляд, что-то подобное легче читать и поддерживать.

Просто вариант. :)

0 голосов
/ 20 июля 2010 
$(function() {
      // Add Confirmation dialogs for all Deletes
      $("a.confirm-delete").click(function(event) {
          if(fConfirmDelete('Note')){
            return true;
          }else{
            return false;
          }
      }); 
});
...