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事件并为我执行操作，如果存在，则继续执行click事件功能。

Answer 1

可能会起作用，

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

Answer 2

按照以下步骤创建包含自定义事件的插件。我将通过创建一个提交按钮来显示这一点，该按钮将在提交表单之前引发preSubmit事件。

第一步在基础对象上创建一个EventHandler

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

嵌套在stand bind事件处理程序中绑定事件：

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();
},

既然插件同时具有click处理程序和preSubmit处理程序，您需要将此插件附加到页面上的元素。有多种方法可以做到这一点，但这个版本非常常见，是我见过的更加流畅的版块插件控件的一部分：

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

在需要此功能的页面上，例如提交数据的页面，但需要在提交表单之前设置隐藏的表单值（这是我的问题。注意：我的问题是绑定的在点击事件被触发之前触发了插件的click事件。因此，在页面上的click事件处理程序之前提交的表单可以更改值。

在页面上你需要做的就是为preSubmit事件设置一个事件处理程序，然后按照那里的表单中的值进行工作。

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

现在，插件将触发将在表单提交之前处理的新事件。

这是我的插件控件完整代码（除了基类。我使用的是By John Resig http://ejohn.org/的SimpleInheritance.js）

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");
}

});

如何向插件添加自定义事件

2 个答案: