Как добавить настраиваемое событие в плагин

Question

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

Я думаю, что я хотел бы добавить пользовательский прослушиватель событий или событий, который может быть запущен в событии кликов подключаемых модулей. Затем я смогу привязать свои элементы управления к этому событию, чтобы он установил скрытое значение ввода перед его отключением.

Вот кусок моего кода плагина.

//////////////////////////////////////// 
// Object initialization and teardown // 
//////////////////////////////////////// 
init: function (options, element) { 
    this._super(options, element); 
}, 

bind: function() { 
    this.element.delegate("", "click", 
     $.proxy(this.click, this)); 
    this.element.delegate("", "preSubmit", 
     $.proxy(this.preSubmit, this)); 
}, 

unbind: function() { 
    this.element.undelegate("", "click", this.click); 
}, 

//////////////////// 
// Helper methods // 
//////////////////// 
click: function (e) { 
    var form = this.element.closest("form")[0]; 
    this.preSubmit(); 
    if (form) 
     form.submit(); 

    e.preventDefault(); 
}, 
preSubmit: function(e){ 
    alert("Hi Moe"); 
} 

Теперь на моих страницах я хотел бы иметь возможность использовать preSubmit для выполнения действия перед его отправкой.

Моя страница код что-то вроде этого:

$("#SuggestEdit").preSubmit(function() { 
     alert("just a test2"); 
     $("#SuggestedAddressAction").val("Edit"); 
     alert($("#SuggestedAddressAction").val()); 
    }); 

Так в псевдокоде: При нажатии кнопки огня от события preSubmit и для меня, и сделать что-то, если она есть в противном случае продолжить событие щелчка Funtionality.

Answer 1

Чтобы создать плагин с пользовательским событием, выполнив следующие действия. Я покажу это, создав кнопку отправки, которая приведет к событию preSubmit перед отправкой формы.

Шаг один Создание EventHandler на базе объекта

preSubmit: function (e) { 
    alert("parent presubmit"); 
} 

Гнезда в обработчике события стенда связывает связать событие:

bind: function(){ 
    this.element.delegate("", "click", $.proxy(this.click, this)); 
    this.element.delegate("", "preSubmit", $.proxy(this.preSubmit, this)); 
}, 

Теперь, чтобы убедиться, что это событие вызывается, когда кнопка но до подачи формы он должен быть поднят в обработчике событий Click:

click: function (e) { 
    var form = this.element.closest("form")[0]; 
    this.element.trigger("preSubmit"); //<-- 
    if (form) 
     form.submit(); 
    e.preventDefault(); 
}, 

Теперь, когда плагин имеет как обработчик кликов, так и обработчик preSubmit, вам необходимо прикрепить этот плагин к элементу на странице. Есть несколько способов сделать это, но эта версия является довольно распространенной и является часть boilier пластины управления плагиными я видел:

$.plugin('button', Myplugin.Common.Control.mybutton); 

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

На странице все, что вам нужно сделать, это настроить обработчик событий для события preSubmit и выполнить свою работу со значениями в форме там.

$("#mybutton").on('preSubmit', function(){ 
      $("#MyName").val("modified value"); 
     }) 

Теперь подключаемый модуль сработает с новым событием, которое будет обработано до отправки формы.

Вот мой контроль плагин полный код (кроме базовых классов. Я использую SimpleInheritance.js от Джон Resig http://ejohn.org/)

Myplugin.Common.Control.mybutton = Myplugin.Common.Control.extend({ 

name: "my_button", 

init: function (options, element) { 
    this._super(options, element); 
}, 

bind: function(){ 
    this.element.delegate("", "click", $.proxy(this.click, this)); 
    this.element.delegate("", "preSubmit", $.proxy(this.preSubmit, this)); 
}, 

unbind: function() { 
    this.element.undelegate("", "click", this.click); 
    this.element.undelegate("", "preSubmit", this.preSubmit); 
}, 

click: function (e) { 
    var form = this.element.closest("form")[0]; 
    this.element.trigger("preSubmit"); 
    if (form) 
     form.submit(); 
    e.preventDefault(); 
}, 
preSubmit: function (e) { 
    alert("parent presubmit"); 
} 

}); 

Answer 2

Может быть, это будет работать,

$(document).off("preSubmit", "#SuggestEdit").on("preSubmit", "#SuggestEdit", function() { 
    alert("just a test2"); 
    $("#SuggestedAddressAction").val("Edit"); 
    alert($("#SuggestedAddressAction").val()); 
});