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个动作。我希望在通过单击按钮向这些元素添加类之后，他们停止执行旧的onclick操作并开始执行新操作（=显示＆＃34;另一个操作＆＃34;警报）。 / p>

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

希望有人能帮我解决这个问题我无法想象。感谢

Answer 1

<强> jsFiddle Demo

您需要将click事件委派给选择器，而不是在第一次运行代码时将其分配。这将允许它适用于未来的元素，而不仅仅是它在首次运行时找到的元素。

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

您可能还想确保只添加一次课程。此外，为了确保删除先前的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

$(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 4

试试这个 - 似乎比尝试设置通用点击事件更容易管理，并且必须在每次点击时解除/绑定它们。

$(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;
    });
});

Answer 5

你可以这样做：

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

Javascript：添加类后更改元素的onclick操作

5 个答案: