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

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

这不是重复的，因为我不使用一个公共元素，而是使用同一个函数的两个不同元素。

---

使用多行：

$('#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); });

---

你为什么不试试这样？

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

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

---

（将作为评论发布，但没有足够的声誉）

你是否调用你的函数'main_call'来绑定你的事件？ 由于它们包含在这个函数中，所以只有当你可以使用这个函数时，它们才会被绑定。

除此之外，你写的jquery事件绑定应该可以正常工作。

如果你想在里面使用它，你还应该将你的事件变量传递给你的函数。

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

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

链接地址: http://www.djcxy.com/p/96929.html

上一篇: Multiple events to trigger same function but with different elements

下一篇: Handle multiple events in jQuery