【问题标题】:How to remove "onclick" with JQuery?如何使用 JQuery 删除“onclick”?
【发布时间】:2010-12-13 20:28:57
【问题描述】:

PHP 代码:

<a id="a$id" onclick="check($id,1)" href="javascript:void(0)"  class="black">Qualify</a>

我想删除onclick="check($id,1) 这样链接就不能被点击或者“check($id,1) 不会被触发。我怎样才能用 JQuery 做到这一点?

【问题讨论】:

    标签: jquery attributes event-handling jquery-events


    【解决方案1】:

    删除onclick 属性

    假设您内联添加了点击事件,如下所示:

    <button id="myButton" onclick="alert('test')">Married</button>
    

    然后,您可以像这样删除事件:

    $("#myButton").prop('onclick', null); // Removes 'onclick' property if found
    

    删除 click 事件监听器

    假设您通过定义事件侦听器添加了单击事件,如下所示:

    $("button").on("click", function() { alert("clicked!"); });
    

    ...或者像这样:

    $("button").click(function() { alert("clicked!"); });
    

    然后,您可以像这样删除事件:

    $("#myButton").off('click');          // Removes other events if found
    

    同时删除

    如果您不确定您的活动是如何添加的,您可以将两者结合起来,如下所示:

    $("#myButton").prop('onclick', null)  // Removes 'onclick' property if found
                  .off('click');          // Removes other events if found
    

    【讨论】:

      【解决方案2】:

      旧方式(1.7 之前):

      $("...").attr("onclick", "").unbind("click");
      

      新方式(1.7+):

      $("...").prop("onclick", null).off("click");
      

      (将 ... 替换为您需要的选择器。)

      // use the "[attr=value]" syntax to avoid syntax errors with special characters (like "$")
      $('[id="a$id"]').prop('onclick',null).off('click');
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
      
      <a id="a$id" onclick="alert('get rid of this')" href="javascript:void(0)"  class="black">Qualify</a>

      【讨论】:

      • 不应该是removeAttr('onclick')吗?
      • 是的,好点,可能更干净,但我不确定从执行的角度来看会有所不同。
      • 使用 jQuery 1.7+ 你可以使用开/关:stackoverflow.com/questions/209029/…
      • 查看removeAttr api.jquery.com/removeattrRemoving an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead的第一条评论
      • @andyface 是的,在文档中,但我也必须为 IE11 使用 .prop()
      【解决方案3】:

      使用 removeAttr 非常简单。

      $(element).removeAttr("onclick");
      

      【讨论】:

        【解决方案4】:

        如果 onclick 事件不是直接在元素上,而是来自父元素怎么办? 这应该有效:

        $(".noclick").attr('onclick','').unbind('click');
        $(".noclick").click(function(e){
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
        

        【讨论】:

        • 添加另一个点击侦听器(以防止默认等)可能会将其添加到侦听器列表的末尾,因此其他侦听器仍将首先执行。我不确定它是首先添加还是最后添加到列表中。无论如何,最好使用其他答案中看到的“关闭”。
        【解决方案5】:

        如果您使用的是 jquery 1.7

        $('html').off('click');
        

        其他

        $('html').unbind('click');
        

        【讨论】:

          【解决方案6】:

          在使用 bind、unbind、on、off、click、attr、removeAttr、prop 努力尝试之后,我成功了。 所以,我有以下场景:在我的 html 中,我没有附加任何内联 onclick 处理程序。

          然后在我的 Javascript 中,我使用以下内容添加了一个内联 onclick 处理程序:

          $(element).attr('onclick','myFunction()');
          

          为了稍后从 Javascript 中删除它,我使用了以下内容:

          $(element).prop('onclick',null);
          

          这就是我在 Javascript 中动态地绑定和取消绑定点击事件的方式。请记住不要在您的元素中插入任何内联 onclick 处理程序。

          【讨论】:

          • 我喜欢这个,但为什么一个是 prop 而另一个是 attr?
          • 我不确定,但我看到的方式是使用 attr 添加/注入 onclick 处理程序以及相应的 myFunction() 和 prop('onclick',null) 删除属性,所以不会调用任何函数。这就是它对我有用的方式。我可以注意到元素如何通过 attr 具有 onclick 处理程序,以及它是如何在 prop 之后被删除的。
          • 为了将来参考,您应该真正使用.on('click', myFunction)(注意myFunction 不是在引号中),然后是.off('click')
          【解决方案7】:

          我知道这已经很老了,但是当一个迷路的陌生人发现这个问题正在寻找答案时(就像我一样),那么这是最好的方法,而不是使用 removeAttr():

          $element.prop("onclick", null);
          

          引用jQuerys official doku:

          “使用 .removeAttr() 删除内联 onclick 事件处理程序在 Internet Explorer 6、7 或 8 中无法达到预期效果。为避免潜在问题,请改用 .prop()”

          【讨论】:

          • 我发现这是最好的删除 onlick 事件的方法,当你像这样输入它时。 &lt;span onlick="method()"&gt;sometext&gt;/span&gt;该活动完全解除绑定,效果很好
          • 我认为这不是最好的方法。 jsfiddle.net/TN2wrjsfiddle.net/TN2wr/1
          • 我使用的是早于 1.6 的 JQ,因此 $(element).attr('onclick', null);为我工作。
          【解决方案8】:

          如果你通过ID解绑onclick事件试试这个然后使用:

          $('#youLinkID').attr('onclick','').unbind('click');
          

          如果你按Class解绑onclick事件试试这个然后使用:

          $('.className').attr('onclick','').unbind('click');
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2014-05-10
            • 1970-01-01
            • 2011-05-27
            • 1970-01-01
            • 2011-10-31
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多