內聯onclick處理程序防止catch表單提交

Question

我有以下內聯代碼，我無法更改由於外國人插件輸出。包含onclick處理程序觸發submit事件：

<input type='button' id='gform_next_button_12_188' 
class='button gform_next_button' value='Next' tabindex='3' 
onclick='jQuery("#gform_target_page_number_12").val("2"); jQuery("#gform_12").trigger("submit",[true]); '/> 

我想之前運行一些程序提交表單，我嘗試這樣做：

$("#gform_12").submit(function(e){ 

    // this code is not running ... 

}); 

，這是失敗的，也就是說，我的代碼是不是在提交表單時運行。任何建議？

基礎上給出的答案最終解決方案

var inline_onclick_code_on_next = $(".gform_next_button").first().attr("onclick"); 
$(".gform_next_button").removeAttr("onclick"); 
$(".gform_next_button").bind("click", function() { 
    myClass.autosave_on_click(inline_onclick_code_on_next); 
}); 

myClass = { 
    errorMessage : "", 
    autosave_on_click: function (inline_onclick_code){ 
     my_gravity_form_saving_running = 1; 
     myClass.saveData(); // this code must put my_gravity_form_saving_running = 0 when all data be saved 
     countdown_max_loop = 10; // seconds 
     var countdown = window.setInterval(function(){ 
      if (countdown_max_loop-- == 0 || my_gravity_form_saving_running == 0){ 
       clearInterval(countdown); 
       eval (inline_onclick_code); 
      } 
     }, 1000); 
    } 
} 

Answer 1

嘗試從元素中解除綁定單擊事件，然後指定您自己的。

$('#gform_next_button_12_188').unbind('click').removeAttr('onclick'); 
$('#gform_next_button_12_188').bind('click', function() { 
    // do magic stuff 

    // do the rest 
    jQuery("#gform_target_page_number_12").val("2"); 
    jQuery("#gform_12").trigger("submit",[true]); 
}); 

編輯：

添加removeAttr，感謝@gdoron

Answer 2

你應該能夠解除綁定單擊方法，然後重新綁定你想做的事，而不是什麼：

$('#gform_next_button_12_188') 
    .unbind('click') 
    .bind('click', function() { 
     // your stuff 
     // submit stuff that was there 
    }); 

編輯：嘗試使用此替代來覆蓋onclick屬性：

$('#gform_next_button_12_188') 
    .attr('onclick', '') 
    .bind('click', function() { 
     // your stuff 
     // submit stuff that was there 
    }); 

Answer 3

這將是方便，能夠給前面加上你的東西而不必重新輸入（甚至知道）內聯的東西。

下面的函數將做到這一點：

$(function(){ 
    function prependHandler(selector, event, fn) { 
     try { 
      if (event.split(' ').length > 1) { 
       event = event.split(' ')[0]; 
      } 
      var $el = $(selector), 
       inline_handler = $el.get(0)['on' + event]; 
      $el.on(event, function() { 
       fn.call(this); //invoke your own magic stuff 
       inline_handler.call(this); //invoke original inline magic stuff 
      }).get(0)['on' + event] = null; 
      return true; 
     } 
     catch (e) { 
      return false; 
     } 
    } 

    //call as follows: 
    prependHandler("#gform_next_button_12_188", 'click', function() { 
     alert('my functionality'); //specify your own magic stuff here 
    }); 
}); 

見fiddle

注：

• 在prependHandler，我們使用.call(this)確保this（目標元素的引用）在原始處理程序和預處理程序中可用作this，以防需要編輯。
• prependHandler返回true或false以允許您測試它是否成功，以防您需要知道。
• 鑑於您可以傳入選擇多個元素的選擇器，使用.get(0)內部限制prependHandler以處理第一個選定元素。
• 隨着一個更多的想法，你可以將prependHandler作爲一個jQuery插件來克服上述限制，但它會在單個元素上正常工作。