推迟执行连接到控制事件的 Javascript 以支持外部 jQuery 函数

Posted 2023-04-13

【中文标题】推迟执行连接到控制事件的 Javascript 以支持外部 jQuery 函数

【英文标题】：Postpone the execution of Javascript wired to a control event in favour of external jQuery function

【发布时间】：2012-02-14 15:43:48

【问题描述】：

我有一个由其他开发人员开发的 ASP.NET Web 表单应用程序。

该开发人员广泛使用 ASP.NET 控件，因此有许多自动生成的 Javascript 函数连接到 html 元素的事件。

现在我被要求添加一个功能：在第一次敲击时禁用提交按钮，以避免用户多次单击按钮。

这是我使用的 jQuery 代码http://jsfiddle.net/2hgnZ/80/，HTML DOM 与我使用的相同：

$('#form1').submit(function(e) 
    $(this).find('input[type=submit]').attr('disabled', 'disabled');
    // this is to prevent the actual submit
    e.preventDefault();
    return false;
);

我的代码中的这个脚本不起作用，经过多次尝试，我确信它依赖于连接到按钮的 onSubmit 事件的 JavaScript 事件。

我怎样才能推迟这个 javascript 的执行以支持 jQuery 不显眼的功能？

【参考方案1】：

嗯。你能确认你的事件正在触发吗？我检查了提交文档，它是绑定的而不是实时的，这很好。

改为连接到按钮怎么样？这并不完美，因为回车键不使用按钮，但如果它以这种方式工作，你会学到一些东西

【讨论】：

谢谢！我不明白您所说的“您能否确认您的事件正在触发”是什么意思。此外，将其连接到按钮很复杂，因为按钮也是自动生成的，因此 id 由 asp.net 给出

在你的回调中弹出一个警告对话框，看看是否弹出。为了绑定到按钮，为什么需要 id？使用 $('#form1 input[type=submit]').bind('click', function.. 怎么样。注意 'click' 方法默​​认是 live 的，所以这里要专门使用 bind。

我已经试过了提示不弹出。这不可能，我在这之后花了一整天..

这不是不可能的，它可能只是真的很愚蠢。不幸的是，我从未使用过 ASP，也不知道它如何或何时绑定其事件。是否在脚本中添加了元素？在这种情况下，您需要确保它们在添加后被您绑定，而不是在 DOMready 上。 ASP 本身是否使用事件绑定？在这种情况下，您可能需要取消绑定其事件。如果使用 jq，您可以使用 $(selector).data('events') 查看已绑定的事件区域。如果检查 .onclick 值会发生什么？

问题是当你使用 ASP.NET 控件时，尤其是复杂的控件，如 GridView、Wizard，引擎会将突兀的 JS 连接到 HTML 元素。并且突兀的 JS 在不突兀的 JS 之前执行，例如 jQuery。现在我正试图推迟所有突兀的 JS。让我们看看会发生什么

【参考方案2】：

您是否尝试过调用 e.stopImmediatePropagation(); http://api.jquery.com/event.stopImmediatePropagation/

【参考方案3】：

这段代码延迟了你想要的函数量的执行。

// delay code for one second
$(document).ready(function() 

    window.setTimeout(function() 
    
        // delayed code goes here
    , 1000);
); 

【讨论】：

谢谢，但我需要延迟连接到按钮的函数（由 ASP.NET 自动生成，我无法控制）

我不认为你理解这个问题。他希望阻止其他人的事件，而不是拖延自己的事件。你的解决方案只会让问题变得更糟。

@Peter Ehrlich，第 1 步：按钮由 ASP 生成的 javascript 提供一个事件。第2步：您运行自己的javascript（之后），解耦第一个事件并附加一个新事件。那是我的思路。 PS。感谢您的评论。

【参考方案4】：

这段代码应该可以帮助您获取原始事件，然后在您想要的代码之后触发它。

$(function()
    var $button = $('#actionButton'),
    clickEvent = $button.data("events")['click'][0].handler; //saves the original click event handler

    $button.unbind('click'); //and removes it from the button

    //create a new click event.
    $button.click(function(e)
        // doWhatever we need to do
        $.ajax(
            url: url,
            data: data,
            success: function()
                $.proxy(clickEvent,$button)(e);//attach the original event to the button
            
        );
    );
);