عنصر متداخلا لن يزيل الطبقة الأصل

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>, ، عندما نقرت على طفل من ذلك لإزالة الفئة النشطة، أزالها، ثم أضفتها على الفور مرة أخرى.

الحل كان لتحديد <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');
      });
    });