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')
   .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 2

尝试从元素中取消绑定click事件，然后指定自己的。

$('#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 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插件以克服上述限制，但它可以在单个元素上正常工作。

内联onclick处理程序阻止catch表单的提交

3 个答案: