중첩 요소는 부모 클래스를 제거하지 않습니다

Question

수업은 an에 설정됩니다 <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>, 어린이를 클릭하여 활성 클래스를 제거하면 제거한 다음 즉시 다시 추가했습니다.

해결책은 선택하는 것이 었습니다 <a> 내부 <li> 처음에 (그것은 설정되었습니다 display:block 그리고 같은 공간을 덮습니다 li 하다.)

바보 나.

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

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