内联onclick正在覆盖JQuery click(）

Inline onclick is overriding JQuery click()

本文关键字：click JQuery 覆盖 onclick 内联      更新时间：2023-09-26

这个问题的后续

编辑

JSFiddle代码

正如您所看到的，如果您运行代码，按钮文本不会更改，onclick将覆盖click函数。如果从函数中删除form 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创建一个函数，该函数将禁用提交按钮，同时在doSubmit的情况下保持任何onclick属性正常工作，就像本例中一样。在其他设置了表单id但没有现有onclick的情况下，我会提交表单。因此，如果html标签有问题，我需要一种通用的方法来用JS修复它。

提前感谢

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

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

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

不幸的是，无法预测同一元素上同一事件的事件处理程序执行顺序。

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

演示

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();
});
相关文章：