内联 onclick 覆盖 JQuery click()

Posted 2023-02-24

【中文标题】内联 onclick 覆盖 JQuery click()

【英文标题】：Inline onclick is overriding JQuery click()

【发布时间】：2013-07-07 08:26:00

【问题描述】：

来自this question的关注

编辑

JSFiddle code

如您所见，如果您运行代码，按钮文本不会改变，onclick 会覆盖 click 函数。如果您从函数中删除表单 id 属性并从 html 标记中删除 onclick 属性，则代码将按预期工作（在实际场景中，没有 onclick 函数意味着提交按钮而不是按钮）

结束编辑

我曾认为当指定内联事件时，JQuery 没有触发 click() 事件，但我又遇到了这个问题。这是我的代码和有问题的标签

<input id="submit1" type="button" onclick="this.disabled=true; doSubmit();" value="submit">


<script>myfunction('submit1', 'working', myformID)</script>

var myfunction = function(ID , text , formID) 
if(ID) 
    var element = document.getElementById(ID);
    if(formID) 
        var form = document.getElementById(formID);
    
    if (element) 
        jQuery(element).click( function() 
            if(jQuery(this).attr('disabled')) 
                return false;
            
            jQuery(this).attr('disabled' , 'disabled');
            jQuery(this).attr('value' , processingText);
            onclick = (jQuery(this).attr('onclick') || jQuery(this).attr('onClick'));
            if(form && !onclick) 
                jQuery(form).submit();
             
            jQuery(this).click();
        );
    

;

我正在使用 javascript 创建一个函数，该函数将禁用提交按钮，同时保持任何 onclick 属性在 doSubmit 的情况下正常工作，就像在这种情况下一样。在设置了表单 ID 并且没有现有 onclick 的其他情况下，我提交表单。因此，如果 html 标签有问题，我需要一个通用的方法来用 JS 修复它。

在此先感谢

【问题讨论】：

也许你可以提供一个 JSfiddle 版本的问题？

你的点击处理程序是无限递归的......

你确定吗？第二次调用它应该返回 false，因为 click 函数中的第一个 if()

【参考方案1】：

您的内联处理程序禁用按钮：this.disabled=true;

然后 jQuery 处理程序检查它是否被禁用，如果是则返回：

if(jQuery(this).attr('disabled')) 
      return false;

不幸的是，no way to predict the order 的事件处理程序在同一元素上执行同一事件。

作为一个快速解决方案，我可以建议：

Demo

jQuery(element).click( function() 
    if(jQuery(this).attr('disabled-by-jquery')) 
        return false;
    
    jQuery(this).attr('disabled' , 'disabled');
    jQuery(this).attr('disabled-by-jquery' , 'disabled');
    jQuery(this).attr('value' , text);
    onclick = (jQuery(this).attr('onclick') || jQuery(this).attr('onClick'));
    if(form && !onclick) 
        jQuery(form).submit();
     
    jQuery(this).click();
);

【讨论】：

不幸的是，您的演示似乎在加载后就可以工作，然后就无法再次工作，但是我已经以类似的方式重建了函数，根本问题是事件处理程序没有从标签外部开始按顺序调用正如我所想的，所以我接受了这个答案。非常感谢您的宝贵时间