Question

以下是我尝试做的一个简单示例，我有HTML代码，我的目的是禁用三个超链接#validate，#organize和#export ：

<p id="menuitems" class="inline textcenter">
                        <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> 
                        <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> 
                        <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> 
                        <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
                    </p>

当我试图打电话给以下时，没有任何事情发生。我正在使用jQuery 1.11.4，并且我已经读过自1.7以来禁用事件监听器的方法已经改变。所以我想知道下面的JavaScript代码是否有错误或是否有新的更改：

$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');

Answer 1

一种方法是暂时将onclick设置为null，但将原始元素onclick存储在element或jquery对象中（例如data）。使用辅助功能，您可以打开或关闭元素：

function setEnabled($a, Enabled ){
    $a.each(function(i, a){          
        var en = a.onclick !== null;        
        if(en == Enabled)return;
        if(Enabled){
            a.onclick = $(a).data('orgClick');            
        }
        else
        {
            $(a).data('orgClick',a.onclick);
            a.onclick = null;
        }
    });
}

可以通过以下方式调用：

setEnabled($('#validate'), false);

（也适用于由于每个元素而具有多个元素的jquery对象）

Example fiddle

Answer 2

您需要取消绑定click事件（内联声明），如下所示。

document.getElementById("import").onclick = null;
document.getElementById("validate").onclick = null;
document.getElementById("organize").onclick = null;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
  <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >>
  <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >>
  <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >>
  <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>

Answer 3

通过javascript附加的事件无法通过jquery识别，因此javascript和jquery混合接近无法正常工作 - 这就是jquery的原因 .off（＆＃39;单击＆＃39;）;不会分离点击事件。

修改html：

  <p id="menuitems" class="inline textcenter">
        <a id="import" href="javascript:void(0);">IMPORT</a> >>
        <a id="validate" href="javascript:void(0);">VALIDATE</a> >>
        <a id="organize" href="javascript:void(0);">ORGANIZE</a> >>
        <a id="export" href="javascript:void(0);">EXPORT</a>
    </p>

使用jquery附加click事件：

 $(document).ready(function () {
          $('#import').on("click", function () {
                switchScreen('Import');
            });
            $('#validate').on("click", function () {
                switchScreen('Validate');
            });
            $('#organize').on("click", function () {
                switchScreen('Organize');
            });
            $('#export').on("click", function () {
                switchScreen('Export');
            });
});

在需要时禁用点击事件：

 $('#import').off('click');
 $('#validate').off('click');
 $('#organize').off('click');
 $('#export').off('click');

上述方法适用于所有标准浏览器，但仅针对IE，我们可以采用另一种方法：

  $('#validate').attr("disabled", "disabled");
  $('#organize').attr("disabled", "disabled");
  $('#export').attr("disabled", "disabled");

Answer 4

你可以让jQuery接管你的内联事件，以便以后可以off()。请注意，off() 会删除侦听器。你不能真正禁用它，除非你在处理程序本身中加入一些逻辑来拯救它，如果它不应该运行。

＆＃13;

function switchScreen(screenName) {
  console.log(screenName);
};

$(function() {
  $('#menuitems a').each(function() {
    var oldClick = this.onclick;
    $(this).on('click', $.proxy(oldClick, this));
    this.onclick = null;
  });
  
  $('#import').off('click');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="menuitems" class="inline textcenter">
    <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> 
    <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> 
    <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> 
    <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
</p>

＆＃13;

Answer 5

尝试取消绑定而不是关闭，因为点击事件是内联定义的，如果使用on附加了click，那么它将关闭。

jQuery：使用off（）无效工作时禁用onclick事件

5 个答案: