jQuery - 触发相同功能但具有不同元素的多个事件

时间:2015-06-19 11:46:10

标签: jquery events

jQuery代码段

function main_call(){
jQuery("#user_registration").on('submit',function(event) { 
    load_product_serial();
});
jQuery("#reg_submit").on('blur',function(event) {
    load_product_serial(); 
});

}


function load_product_serial(){
        var result = [];
        var prod_serial = jQuery('#reg-product-serial').val(); //fetch input value
        jQuery.ajax({
        type: "GET", 
        url: ajaxurl,
        async: false,
        dataType : "JSON",
        contentType: 'application/json; charset=utf-8',
        data : {action: "get_product_serial"},
        //cache: false, 
            success: function(data){

                result = data;
                if( jQuery.inArray( prod_serial, result ) < 0 ){
                    jQuery( "#invalid_dialog" ).dialog({
                    width: 350,
                    modal: true,
                    resizable: false,
                    dialogClass: 'no-close success-dialog',
                    buttons: {
                      Ok: function() {
                        jQuery( this ).dialog( "close" );
                      }
                    }
                  });
                    jQuery( "button.ui-dialog-titlebar-close" ).hide();//hide close button
                    event.preventDefault();
                    return false;

                }else{
                    alert('Success');
                    //jQuery( "#valid_dialog" ).dialog();
                    return true;
                }
            },
            error: function() {
                alert('Unexpected error occured. Please try again.');
            }
        });    
    //});
}

这里我需要在用户点击提交按钮事件(reg-product-serial)时或者当用户更改输入值onblur事件(reg-product-serial)时调用该函数

我可以使用.on()绑定到多个事件,但此处的元素不相同。

$('#element').on('keyup keypress blur change', function() {
    ...
});

这不是duplicate,因为我没有使用一个共同的元素,而是使用两个不同的元素来实现相同的功能。

3 个答案:

答案 0 :(得分:1)

为什么你不尝试这样?

将整个代码包装在一个函数中,然后从这两个事件中调用该函数。

jQuery('#reg-product-serial').on('blur', function() {
    //call the function from here
});
jQuery("#reg_submit").click(function(event) {
    //call the function from here
});

答案 1 :(得分:0)

使用多行:

$('#element').on('submit',function() { load_product_serial(); });
$('#element2').on('keypress blur change',function() { load_product_serial(); });

另外,仅供参考,不要使用click事件将函数绑定到提交按钮单击,当您真正想要做的是将其绑定到表单的submit事件时本身。

修改

关于以下关于event not defined错误的评论,请勿忘记将您的事件对象作为参数传递:

function load_product_serial(event) {
  ....
  event.preventDefault();
  ....
}

$('#element').on('submit',function(e) { load_product_serial(e); });
$('#element2').on('keypress blur change',function(e) { load_product_serial(e); });

答案 2 :(得分:0)

(会发表评论但没有足够的声誉)

你是否调用你的函数'main_call'来绑定你的事件? 由于它们包含在此函数中,因此在您可以使用该函数之前,它们不会被绑定。

你写的jquery事件绑定应该可以正常工作。

如果您想在其中使用它,您还应该将事件变量传递给您的函数。

jQuery("#user_registration").on('submit',function(event) { 
    load_product_serial(event);
});

PS:你应该在成功回调中使用一个函数来使代码更具可读性。