Javascript: 添加class后改变元素的onclick动作

Question

我遇到这样的情况：

HTML

<span class="element e1" id="FirstElement" onclick="Javascript:alert(this.id)"> 
    <span class="element e2" id="SecondElement" onclick="Javascript:alert(this.id)"> ELEMENT </span>
</span>
<button class="addButton"> ADD CLASS </button>

JAVASCRIPT:

$(document).ready(function() {
    $('span.element.anotherClass').click(function(e) {
          alert("ANOTHER ACTION"); 
          return false; // I tried also preventDefault() but not working
    });

    $('.addButton').click(function(e){
        $('span.element').addClass(" anotherClass");
    });

});

注意两个 span 元素有一个 onclick 动作。我希望通过单击按钮向这些元素添加 class 后，它们停止执行旧的 onclick 操作并开始执行新操作（= 显示 "ANOTHER ACTION" 警报）。

您可以在 this Fiddle 中尝试上面的代码。

希望有人能帮我解决这个我想不通的问题。谢谢

Answer 1

jsFiddle Demo

您需要将点击事件委托给选择器，而不是第一次在代码运行中分配一次。这将允许它适用于未来的元素，而不仅仅是它在第一个运行.

时找到的元素

$('body').on('click','span.element.anotherClass',function(e) {
      alert("ANOTHER ACTION"); 
});

您可能还想确保只添加一次 class。此外，为了确保删除以前的 onclick 事件，您需要遍历它们并删除 onclick 分配。

$('.addButton').click(function(e){
    $('span.element').not('.anotherClass').each(function(){
      this.onclick = void 0;//void 0 is just undefined
    }).addClass("anotherClass");
});

Answer 2

如果您从 HTML 中删除了 onclick 那么你可以这样做：

$(document).ready(function() {
  $('span.element').click(function(e) {
    if ($(this).hasClass('anotherClass')) {
      alert("ANOTHER ACTION");
    } else {
      alert($(this).attr('id'));
    }
    return false; // I tried also preventDefault() but not working
  });

  $('.addButton').click(function(e) {
    $('span.element').addClass(" anotherClass");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element e1" id="FirstElement"> 
    <span class="element e2" id="SecondElement"> ELEMENT </span>
</span>
<button class="addButton">ADD CLASS</button>

Answer 3

你可以这样做：

$('span.element').attr("onclick", yourNewFunction());

Answer 4

$(document).ready(function() {
    $('body').on('click','span.element.anotherClass',function(e) {
      alert("ANOTHER ACTION");
        return;
    });

    $('.addButton').click(function(e){        
        $('span.element')[0].onclick = '';
        $('span.element')[1].onclick = '';        
        $('span.element').addClass("anotherClass");

    });

});

请注意，这将触发两次，因为您实际上点击了 2 个 span.element。

Answer 5

试试这个 - 似乎比尝试设置通用点击事件并且每次点击都必须 unbind/bind 它们更容易管理。

$(document).ready(function(e){
    $(".addButton").on("click", function(e){
        e.preventDefault();
        $("span.element").removeClass("anotherClass"); //Just in case you double-click
        $("span.element").addClass("anotherClass");
        return false;
    });

    $(".element").on("click", function(e){
        e.preventDefault();
        if ($(this).hasClass("anotherClass"))
            alert("another class");
        else
            alert($(this).prop("id"));
        return false;
    });
});

Javascript: 添加class后改变元素的onclick动作

Javascript: change onclick action of elements after adding a class

html

javascript

onclick