jquery changed classが反応しません

class oldClassを持つHelloという単語をクリックすると、jqueryはnewClassクラスにクラスを変更します。これは単語Hello Blueを色付けします。これは、クラスが変更されたことを意味します。 jQueryがnewClassクラスのクリックに応答しないのはなぜですか？jquery changed classが反応しません

<!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>

出典

2016-09-12 Kobbe

使用 '.toggleClass（）' [デモ]（https://jsfiddle.net/x9e06kmo/） –

役立つことを願っています：jQueryのは、HTTPS addClassとremoveClass機能を実装：//api.jquery.com/addclass/ –

委任あなたはイベント

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

出典

2016-09-12 05:32:06 madalinivascu

madalin ivascuフォー・プレゼンテーション！あなたはマダリンイカスカです。ありがとうございました！ – Kobbe

もう一度会いましょう！ ;）私はそれを試みます、そして私はtoggleClassでChakriの助言に従います。 – Kobbe

Madalin Ivascu、私は私がやろうとしていることにそれを適合させる方法は本当に分かりません。上の例は簡単な例です。私がしようとしているのは、4つのフィールド（名、姓、ユーザー、パス）と "X"（クロス）.pngという新しい行を追加することです。「X」をクリックすると、行が削除されます。これは正常に動作しますが、新しく作成された行は追加されません。作成時に行にIDが割り当てられますが、「X」.pngをクリックしてもjQueryではトリガーされません。上記のコードをコピーして編集して貼り付けてください。 – Kobbe

より良い使用 toggleClass（ 'oldClass newClass'）を使用する方をクリックします。

出典

2016-09-12 05:37:31 Chakri

イベントバインディング時にnewClassが存在しないためです。クラスはhttps://jsfiddle.net/9w0z95ru/

出典

2016-09-12 05:43:28

jsfiddle 上のコード

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

チェックこれは、次の使用を変更されるたびにあなたは、このようにそれを行うことができ、イベントを添付する必要があります。これはFYIあなたに

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

 
<style> 
 
p{ 
 
\t cursor:pointer; 
 
} 
 

 
.newClass{ 
 
\t color: red; 
 
\t 
 
} 
 

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

 
<body> 
 
\t 
 
<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(){ 
 
\t var theClassname = $(this).attr('class'); 
 

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

 
}); 
 

 

 

 

 
</script> 
 
</html>

出典

2016-09-12 06:06:54

jquery changed classが反応しません

答えて

関連する問題