Как передать функцию в качестве аргумента плагина jQuery

Question

Я пытаюсь написать простой плагин jQuery, чтобы показать окно предупреждения (custom html + css) и привязать кнопки «да» и «нет» к функциям, переданным в качестве аргумента вызова плагинов.

Вот мой код:

(function($) {
$.fn.triggerAlert = function (msg,yes,no) {
    $('#alert_mask').find("span:first").html(msg);
    $('#alert_mask').toggle();

    $('#alert_mask #alert_yes').click(function (yes) {
        if (typeof yes == 'function') { 
            yes($(this));
        }
        $('#alert_mask').hide();
        return false;       
    });

    $('#alert_mask #alert_no').click(function (no) {
        if (typeof no == 'function') { 
            no($(this));
        }
        $('#alert_mask').hide();
        return false;       
    });

}   
})(jQuery);

Это в правильном направлении или просто неправильно?

Спасибо

ОБНОВЛЕНИЕ: после Логан Ф. Смит ответить Мне пришлось внести корректировку, потому что события нажатия кнопок «да» и «нет» здесь определяются несколько раз. Для использования в будущем или для кого-то еще, вот полный плагин.

(function($) {
  $.fn.triggerAlert = function (trigger,msg,yes,no) {
    var mask = $('#alert_mask');
    $(trigger).click(function (e) {
        mask.find("span:first").html(msg);
        mask.toggle();
        e.preventDefault();
    });

    $('#alert_yes').click(function (e) {
      if (yes) yes($(this));
      mask.hide();
      e.preventDefault(); 
    });
    $('#alert_no').click(function (e) {
      if (no) no($(this));
      mask.hide();
      e.preventDefault();
    });
  }   
})(jQuery);

И пример того, как это назвать

 $().triggerAlert(
    $('#some_element'),
    'hello world',
    function() { alert('yes') },
    function() { alert('no')  }
  );

Answer 1

Основная проблема, которую я вижу, заключается в том, что ваши обработчики кликов принимают аргументы «нет» и «да», что означает, что внутри этих функций да и нет не будет тем, что вы передали всему плагину.

Также необязательно, чтобы ваши селекторы использовали два идентификатора, поскольку идентификаторы в любом случае уникальны. Наконец, возвращать false - плохая идея, вместо этого используйте protectDefault.

(function($) {
  $.fn.triggerAlert = function (msg,yes,no) {
    var mask = $('#alert_mask');
    mask.find("span:first").html(msg);
    mask.toggle();

    $('#alert_yes').click(function (e) {
      if (yes) yes($(this));
      mask.hide();
      e.preventDefault(); 
    });
    $('#alert_no').click(function (e) {
      if (no) no($(this));
      mask.hide();
      e.preventDefault();
    });
  }   
})(jQuery);

Чтобы вызвать это, вы должны вызвать функцию и передать две функции, подобные этой:

$('#some_element').click(function(e){
  $(this).triggerAlert(
    'hello world',
    function() { alert('yes') },
    function() { alert('no')  }
  );
  e.preventDefault();
})

Answer 2

параметры находятся в области действия функции, вы можете попробовать вот так

  $('#alert_mask #alert_no').click(function() {
    if (typeof no == 'function') { 
        no($(this));
    }
    $('#alert_mask').hide();
    return false;       
});