Wie füge ich ein benutzerdefiniertes Ereignis zu einem Plugin hinzu

Question

Problem Ich habe ein Plugin für eine Schaltfläche, die einen Link nimmt und es wie eine Übermittlungsschaltfläche agieren lässt. Aber ich möchte eine Aktion ausführen, bevor das Formular gesendet wird. Da die Klickbindung im Plug-in erfolgt, wird das Klickereignis, wenn ausgelöst, bevor das Klickereignis, das auf der Seite gebunden ist, eine versteckte Eingabe ändert.

Ich denke, dass ich ein benutzerdefiniertes Event oder Ereignis-Listener hinzufügen möchte, die in der Plugins-Click-Ereignis ausgelöst werden kann. Ich kann dann meine Steuerelemente an dieses Ereignis anhängen, so dass es den verborgenen Eingabewert vor dem Abfeuern setzt.

Hier ist ein Stück meines Plugin-Codes.

Jetzt auf meinen Seiten möchte ich in der Lage sein, den preSubmit zu verwenden, um eine Aktion durchzuführen, bevor es gesendet wird.

Meine Seite Code ist so etwas wie diese:

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

So In Pseudo-Code: Wenn Taste Feuer aus dem preSubmit Ereignisse geklickt und für mich und etwas tun, wenn es da ist sonst mit dem Click-Ereignisse weiter Funktionalität.

Answer 1

Um diesen Schritten folgt ein Plugin mit einem benutzerdefinierten Ereignis zu erstellen. Ich werde dies zeigen, indem ich einen Submit-Button erzeuge, der vor dem Absenden des Formulars ein preSubmit-Ereignis auslöst.

Erster Schritt Einen Eventhandler auf dem Basisobjekt

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

Nest im Stand binden Ereignishandler die Ereignisse binden:

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

Nun, um sicherzustellen, dass dieses Ereignis ausgelöst wird, wenn der Knopf angeklickt, aber bevor das Formular übermittelt wird, muss es im Click Event Handler ausgelöst werden:

Jetzt, da das Plugin sowohl einen Click-Handler als auch einen preSubmit-Handler hat, müssen Sie dieses Plugin an ein Element auf der Seite anhängen. Es gibt mehrere Möglichkeiten, dies zu tun, aber diese Version ist sehr verbreitet und ist ein Teil von boilier Platte Plugin Kontrollen ich gesehen habe:

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

auf der Seite, die diese Funktionalität zum Beispiel eine Seite benötigt, die Daten einreicht, muss aber noch Legen Sie einen versteckten Formularwert vor dem Senden des Formulars (das war mein Problem). HINWEIS: mein Problem war, dass die Bindung für das Click-Ereignis für das Plugin ausgelöst wurde, bevor das Click-Ereignis ausgelöst wurde. So das Formular vor dem Click-Ereignishandler übergeben auf der Seite könnte den Wert ändern).

Auf der Seite alles, was Sie tun müssen, ist ein Event-Handler für das PreSubmit-Ereignis und machen Sie Ihre Arbeit zu den Werten in das Formular in dort.

Jetzt wird das Plug-in ein neues Ereignis auslösen, das vor dem Senden des Formulars verarbeitet wird.

Hier ist mein Plugin Kontrolle vollständigen Code (neben den Basisklassen. Ich bin mit SimpleInheritance.js von von John 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

Kann sein, es wird funktionieren,

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