jQuery的 - 多個事件來觸發相同的功能，但不同的元素

-1

jQuery的片段：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。

來源

2015-06-19 Slimshadddyyy

使用多行：

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

來源

2015-06-19 11:49:34 Adam

爲什麼甚至不簡單'$（'＃element'）。on（'submit'，load_product_serial）;'？ – Satpal

@Slimshadddyyy，亞當是正確的。如果您正在註冊您在模糊處理程序中單擊處理程序，那麼同樣的點擊處理程序會一次又一次地註冊，每次模糊事件觸發時，您的點擊處理程序都會多次調用。就像他說的那樣，將點擊處理程序部分移到模糊處理程序之外，並確保您只做一次:) – Arkantos

Adam：請參閱我的更新問題。這兩個事件都會調用函數，但如果用戶提交表單，則表示「事件未定義」。如果輸入值無效，我會阻止表單提交 – Slimshadddyyy

爲什麼不試試這樣？

將整個代碼包裝在一個函數中，然後從兩個事件中調用該函數。

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

來源

2015-06-19 11:49:13

除了過度使用選擇器部分外，還有很好的答案。我認爲'＃reg_submit'已經足夠，也比'button＃reg_submit'更快:) – Arkantos

@Arkantos是的。我剛剛從問題中複製了代碼。更新答案.. –

（會後的評論，但不要」沒有足夠的聲望）

你是否調用你的函數'main_call'來綁定你的事件？由於它們包含在這個函數中，所以只有當你可以使用這個函數時，它們纔會被綁定。

你寫的jQuery事件綁定應該可以正常工作。

如果你想在裏面使用它，你也應該把你的事件變量傳遞給你的函數。 PS：你應該在你的成功回調函數中使用一個函數來提高代碼的可讀性。

來源

2015-06-19 12:27:49 Quovadisqc

jQuery的 - 多個事件來觸發相同的功能，但不同的元素

回答

相關問題