嵌套元素不会删除父类

Question

通过单击它可以在<li>上设置类。现在，一个嵌套元素（<button>）不会从其父项中移除该类。

在此先感谢。

$(document).ready(function() { 
     $('.pickOne li').click(function() { 
     $(this).addClass('active'); 
     }); 

     $('.settingsCancelBtn').click(function() { 
     $(this).parent().parent().removeClass('active'); 
     }); 
    }); 

和HTML是像这样：

<div class="fromCamp pickOne four"> 
       <ul class="four"> 
        <li class="first bus"><a href="#" alt="By Bus"></a> 
         <div> 
          <p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
        <li class="second car"><a href="#" alt="By Car"></a> 
         <div> 
          <p><a href="#">Remoras</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
        <li class="third plane"><a href="#" alt="By Plane"></a> 
         <div> 
          <p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
        <li class="fourth stayOver"><a href="#" alt="Staying Over"></a> 
         <div> 
          <p><a href="#">Remoras</a></p> 
          <p><a href="#">Tilefishes</a></p> 
          <p><a href="#">Bluefishes</a></p> 
          <p><a href="#">Tigerfishes</a></p> 
          <button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button> 
          <button class="cmGoButton settingsSaveBtn" type="button">Save</button> 
         </div> 
        </li> 
       </ul> 
      </div> 
      <div class="cmClear"></div> 
     </div> 

Answer 1

好，这里是正在发生的事情：

因为您的按钮中所含LI，当你按一下按钮，它消除了类，然后将事件继续传播，并重新应用类。

所以它是删除;它只是立即重新应用。所以加上

// Dont forget to put the e in function() 
    $('.settingsCancelBtn').click(function(e) { 
    $(this).parent().parent().removeClass('active'); 

    // This is the new line! 
    e.stopPropagation(); 
    }); 

Answer 2

所以分钟，我张贴了这个之后，我的朋友提出了一个解决方案。断点...谁知道。 :)

因为我最初选择<li>，当我点击它的一个孩子去除活动类时，它删除它，然后立即再次添加它。

解决的办法是选择<li>内<a>最初（它设置为display:block并覆盖同一空间的li一样。）

愚蠢的我。

$(document).ready(function() { 
     $('.pickOne li a ').click(function() { 
     $(this).parent().addClass('active'); 
     }); 

     $('.settingsCancelBtn').click(function() { 
     $(this).parent().parent().removeClass('active'); 
     }); 
    });