jQuery更改类没有反应答案

【问题标题】：jquery changed class does not reactjQuery更改类没有反应
【发布时间】：2016-09-12 14:18:02
【问题描述】：

当我单击具有类 oldClass 的单词 Hello 时，jquery 将类更改为类 newClass，它将单词 Hello 蓝色着色。这意味着班级发生了变化。为什么jquery没有响应点击类newClass？

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".oldClass").click(function(){
            $(".oldClass").attr("class","newClass");
        });
        $(".newClass").click(function(){
            $(".newClass").attr("class","oldClass");
        });
    });
    </script>
    <style>
    .oldClass {color:red;}
    .newClass {color:blue;}
    </style>
</head>
<body>
    <p class="oldClass">Hello</p>
</body>

【问题讨论】：

使用.toggleClass()Demo
仅供参考：jQuery 实现 addClass 和 removeClass 函数api.jquery.com/addclass

标签： jquery

【解决方案1】：

委托你点击事件

 $('body').on('click','.oldClass',function(){
    $(".oldClass").attr("class","newClass");
 });
 $('body').on('click','.newClass',function(){
    $(".newClass").attr("class","oldClass");
 });

最好使用toggleClass

$('body').on('click','.oldClass,.newClass',function(){
        $(this).toggleClass('newClass oldClass');
     });

【讨论】：

我们又见面了！ ;) 我会试试的，我会按照 Chakri 的建议使用 toggleClass。
Madalin Ivascu，我真的不知道如何将其融入我正在尝试做的事情中。上面的例子是一个简单的例子。我想要做的是追加新行，其中包含 4 个字段（名字、姓氏、用户、密码）和一个“X”（交叉）.png。单击“X”时，该行被删除。这工作正常，但不适用于新创建的附加行。这些行在创建时被分配了一个 ID，但在 jQuery 中单击“X”.png 不会触发。你能复制我上面的代码，编辑它并再次粘贴吗？
@Kobbe 使用最接近按钮选择最接近的行，例如$('img.delete').closest('.row').remove();

【解决方案2】：

更好地使用 toggleClass('oldClass newClass');

【讨论】：

【解决方案3】：

因为 newClass 在事件绑定时不存在。每当课程更改时，您都需要附加事件使用以下代码

$(document).ready(function(){    
    function bindOldClassClick(){
     $(".oldClass").click(function(){
            $(".oldClass").attr("class","newClass");
            bindNewClassClick();
     });
    }
    function bindNewClassClick(){
        $(".newClass").click(function(){
           $(".newClass").attr("class","oldClass");
           bindOldClassClick();
      });
    }
    bindOldClassClick();
});

在 jsfiddle 上检查这个 https://jsfiddle.net/9w0z95ru/

【讨论】：

【解决方案4】：

你可以这样做。希望对你有帮助

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style>
p{
	cursor:pointer;
}

.newClass{
	color: red;
	
}

.oldClass{
	color: black;
	
}
</style>

<body>
	
<p class="oldClass">This is my paragraph - use me</p>




</body>

<script type="text/javascript">


// CHECK WHICH THE CLASS NAME AND CHANGE
$("p").click(function(){
	var theClassname = $(this).attr('class');

	if(theClassname == "oldClass")
	{
		$(this).attr('class','newClass');
	}
	else
	{
		$(this).attr('class','oldClass');
	}

}); 




</script>
</html>

【讨论】：