Question

我得到了form;

    <div id="mainDiv">
        <form>

        <input name="input1" />
        <input name="input2" />
        <input name="input3" />
        <input name="input4" />

    <button id="showForm">Show Form</button>    
    <button id="sendForm">Submit Form</button>    
        </form>
        </did>

这是我的jQuery插件。

    (function(o){
    o.fn.validateInputs = function(options){

      var settings =  $.extend({

       submitButton:'',
       submitFunction : function(){

         return ""
        },options);

   $(settings.submitButton).on('click',function(){

//......run the FunctionOfChoiceHere!
//...I tried.
console.log(settings.submitFunction) // This logs an Empty Function
})
    }
    })(jQuery);

将军jQuery：

    $('#showForm').on('click',function(){

$('#mainDiv').fadeIn()
    var form = $(this).closest('form');
    var formData =$(form).serialize();

    $('input',form).validateInputs({

    submitFunction :myFunctionOfChoice(formData),
    submitButton:'#submitForm'
    })

    })

现在是myFunctionOfChoice。

function myFunctionOfChoice(data){

console.log(data);
}

问题是，当点击showForm按钮时，这会自动运行myFunctionOfChoice和logs数据....这是正是我不想要的。我要求的是，只有当我点击console按钮时，log才会submitForm。我怎样才能做到这一点？

感谢任何帮助！

Answer 1

这是因为你正在立即调用该功能。

//this calls the myFunctionOfChoice directly
submitFunction :myFunctionOfChoice(formData)

相反，你应该传递函数引用：

submitFunction: myFunctionOfChoice

现在，当点击提交按钮时，你的插件应该调用submitFunction传递表单的数据。

您可以执行以下操作，将表单的数据传递给您的函数：

o.fn.validateInputs = function(options) {
    var $form = $(options.form),
        me = this;

    //...

    $(settings.submitButton).on('click',function() {
        //the this value inside the handler will be the input and data will get passed
        //along with the form as the second parameter
        settings.submitFunction.call(me, $form.serialize(), $form);
    });

jQuery $ .extend [ing]一个函数，参数返回空函数

1 个答案: