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

我的情况是这样的：

HTML

注意两个

span

元素有一个

onclick

动作。我希望在通过单击按钮向这些元素添加类之后，它们停止执行旧的

onclick

操作，并开始执行新操作（=显示“另一个操作”警报）

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

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

您需要将单击事件委托给选择器，而不是在代码第一次运行时将其分配给选择器。这将允许它为将来的元素工作，而不仅仅是它第一次运行时找到的元素

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

---

如果从HTML中删除了onclick 然后你可以这样做：

$（文档）.ready（函数（）{
$（'span.element'）。单击（函数（e）{
if（$（this.hasClass（'anotherClass'））{
警惕（“另一行动”）；
}否则{
警报（$（this.attr（'id'））；
}
return false；//我也尝试了preventDefault（），但不起作用
});
$（'.addButton'）。单击（函数（e）{
$（'span.element'）.addClass（“另一个类”）；
});
});

元素
添加类
您可以执行以下操作：

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

请注意，这将触发两次，因为实际上您正在单击的是2个
span.element
。
试试这个-似乎比尝试设置通用单击事件并在每次单击时必须解除绑定/绑定它们更容易管理

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

好的，谢谢你，但是我怎样才能避免执行这两个旧操作呢？对于那个类的点击事件，取消“off”然后取消“on”不是更容易吗？例如美元（“.Class”）。关闭（“单击”）$（.Class”）。打开（“单击”，函数名）@TravisJ很抱歉，我不理解您的响应。@斯坦-您的代码不会删除事件处理程序。是的，在我看来这是最好的方法。非常感谢，这不起作用-它会将onclick属性设置为其函数的返回值。
$('span.element').attr("onclick", yourNewFunction());

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

    });

});

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