div内で兄弟クラスがJQueryを通じて変化するかどうかを検出します

Question

私は特定のアクションを実行するたびに兄弟クラスを追加するdivを持っています。私は、兄弟クラスが変更されるとすぐに見つけたいと考えています。例えば

、

<div class="form-item"> 
      <div class="mck-radio"> <div id="#this1">Click Element 1 </div></div> 
      <div class="mck-radio checked"> <div id="#this1">Click Element 2 </div></div> 
    </div> 

私はcheckedの兄弟クラスを持っているmck-radioを見つける必要があります。

mck-radioの2つのdiv内でチェックが変更されるたびに、children要素を簡単に取得できます。しかし、以下のことはうまくいかない。これは私がやったことです： -

$(".form-item .mck-radio").change(function() { 
     console.log("sad"); 
}); 

Answer 1

ことができます。また、あなたのIDである#this1はあなたの例では一意ではありません。だからあなたのhtmlはobserversと無効...

$(".form-item .mck-radio").on("DOMSubtreeModified", function() { 
 
    if($(this).hasClass("checked")) { 
 
     console.log("I'm checked now!"); 
 
    } 
 
}); 
 

 
$("button").click(function() { 
 
    $(".form-item .mck-radio:eq(1)").addClass("checked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form-item"> 
 
    <div class="mck-radio"> 
 
    <div id="#this1">Click Element 1</div> 
 
    </div> 
 
    <div class="mck-radio"> 
 
    <div id="#this3">Click Element 2</div> 
 
    </div> 
 
</div> 
 

 
<button>add class</button>

それとも新しいバージョンである：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 
 
var elements = document.querySelectorAll(".form-item .mck-radio"); 
 

 
// observer 
 
var observer = new MutationObserver(function(mutations) { 
 
    // loop changes 
 
    mutations.forEach(function(mutation) { 
 
     // only look for class changes 
 
     if(mutation.type == "attributes" && mutation.attributeName == "class") { 
 
      // do your check 
 
      if($(mutation.target).hasClass("checked")) { 
 
       console.log("I'm checked now!"); 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 
// add observers 
 
for(var i = 0; i < elements.length; i++) { 
 
    observer.observe(elements[i], { attributes: true }); 
 
} 
 

 
// demo 
 
$("button").click(function() { 
 
    $(".form-item .mck-radio:eq(1)").addClass("checked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form-item"> 
 
    <div class="mck-radio"> 
 
    <div id="#this1">Click Element 1</div> 
 
    </div> 
 
    <div class="mck-radio"> 
 
    <div id="#this3">Click Element 2</div> 
 
    </div> 
 
</div> 
 

 
<button>add class</button>

Answer 2

あなたがclass変更を追跡するDOMSubtreeModifiedイベントを使用することができますbind()を使用し、 "DOMNodeInserted DOMNodeRemoved」"

$(".form-item .mck-radio").bind("DOMNodeInserted DOMNodeRemoved'",function(){ 
    console.log("sad"); 
});