jquery click event not working with children

Question

我有以下畫廊http://jsfiddle.net/GErnD/ 我可以翻轉沒有圖片的卡片。但是當我將其他元素（如圖片）放入其中時，如何才能使卡翻轉？

我使用jQuery與sly和css3d。

HTML

<div class="wrap"> 
     <div class="scrollbar"> 
     <div class="handle" style="-webkit-transform: translateZ(0px) translateX(270px); width: 301px;"> 
      <div class="mousearea"> 
      </div> 
     </div> 
     </div> 
     <div class="frame effects" id="effects" style="overflow: hidden;"> 
     <ul style="-webkit-transform: translateZ(0px) translateX(-694px); width: 3500px;" class=""> 
      <li> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        me 
        <img alt="Thumb glo me" src="http://dummyimage.com/300x300/000/fff"> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
      <li> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        view 
        <img alt="Thumb octopus wall art" src="http://dummyimage.com/300x300/000/fff"> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
      <li class="active"> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        another 
        <img alt="Thumb karaoke 2013 002" src="http://dummyimage.com/300x300/000/fff"> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
      <li class=""> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        error 
        <img src=""> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
      <li> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        h 
        <img src=""> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
      <li> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        hey 
        <img src=""> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
      <li> 
       <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
        this 
        <img src=""> 
        </div> 
        <div class="back"> 
        <h2>yoyoyoyoyoyoyoyo</h2> 
        </div> 
       </div> 
       </div> 
      </li> 
     </ul> 
     </div> 
     <div class="controls center"> 
     <button class="btn prev"><i class="icon-chevron-left"> prev</i></button> 
     <button class="btn next">next <i class="icon-chevron-right"></i></button> 
     </div> 
    </div> 

CSS

/* effects */ 
.effects { 
    height: 200px; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    perspective: 800px; 
    -webkit-perspective-origin: 50% 50%; 
    -moz-perspective-origin: 50% 50%; 
    perspective-origin: 50% 50%; 
    overflow-y: show; } 
    .effects ul { 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; } 
    .effects ul li { 
     position: relative; 
     margin: 0 -20px; 
     -webkit-transform: rotateY(60deg) scale(0.9); 
     -moz-transform: rotateY(60deg) scale(0.9); 
     -ms-transform: rotateY(60deg) scale(0.9); 
     -o-transform: rotateY(60deg) scale(0.9); 
     transform: rotateY(60deg) scale(0.9); 
     -webkit-transition: -webkit-transform 600ms ease-out; 
     transition: transform 600ms ease-out; } 
    .effects ul li.active { 
     z-index: 10; 
     -webkit-transform: scale(1); 
     -moz-transform: scale(1); 
     -ms-transform: scale(1); 
     -o-transform: scale(1); 
     transform: scale(1); } 
    .effects ul li.active ~ li { 
     -webkit-transform: rotateY(-60deg) scale(0.9); 
     -moz-transform: rotateY(-60deg) scale(0.9); 
     -ms-transform: rotateY(-60deg) scale(0.9); 
     -o-transform: rotateY(-60deg) scale(0.9); 
     transform: rotateY(-60deg) scale(0.9); } 

.frame { 
    height: 550px; 
    overflow: hidden; } 
    .frame ul { 
    list-style: none; 
    margin: 0px 0px; 
    padding: 0; 
    height: 100%; } 
    .frame ul li { 
     float: left; 
     width: 500px; 
     height: 100%; 
     margin: 0px 0px; 
     padding: 0px; 
     background: #fff; 
     color: #000; 
     text-align: center; 
     cursor: pointer; 
     border: solid #3184e9 2px; 
     border-radius: 20px; } 
     .frame ul li img { 
     padding: 5px 0px; } 
    .frame ul li.active.flip { 
     color: #000; 
     background: #fff; 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
     transform: rotateY(180deg); } 

/* scrollbar */ 
.scrollbar { 
    margin: 5px 0px; 
    padding: 0px 0px; 
    height: 5px; 
    background: #ccc; 
    line-height: 0; } 
    .scrollbar .handle { 
    width: 100px; 
    height: 100%; 
    margin: 5px 0px; 
    background: #292a33; 
    cursor: pointer; } 
    .scrollbar .mousearea { 
    position: absolute; 
    top: -9px; 
    left: 0; 
    width: 100%; 
    height: 20px; } 

的Javascript

var $frame = $('#effects'); 
    var $wrap = $frame.parent(); 

    // Call Sly on frame 
    $frame.sly({ 
    horizontal: 1, 
    itemNav: 'forceCentered', 
    smart: 1, 
    activateMiddle: 1, 
    activateOn: 'click', 
    mouseDragging: 1, 
    touchDragging: 1, 
    releaseSwing: 1, 
    startAt: 3, 
    scrollBar: $wrap.find('.scrollbar'), 
    scrollBy: 1, 
    speed: 300, 
    elasticBounds: 1, 
    easing: 'swing', 
    dragHandle: 1, 
    dynamicHandle: 1, 
    clickBar: 1, 
    keyboardNavBy: 'items', 

    // Buttons 
    prev: $wrap.find('.prev'), 
    next: $wrap.find('.next') 
    }); 

    $('.active').click(function() { 
    document.querySelector('.active').classList.toggle("flip"); 
    }); 
    $('.active').children().click(function() { 
    document.querySelector('.active').classList.toggle("flip"); 
    }); 

Answer 1

出現這種情況是因爲你分配的onClick處理程序只與類.active元素是可見的那一刻，js解析執行該操作。當元素失去類.active或其他元素獲得類.active時，onclick處理程序不會更改，因爲javascript不查找這些更改。

你應該使用$('.active').live('click', function...或使用$('.frame.effects').on('click', '.active', function...

$.live(eventType, callback)，反對$.click(callback)或$.on(eventType, callback)，承認更改類名一樣，$.on(eventType, selector, callback)

---

編輯 沒關係看來，jQuery的扔下live功能。但請查看更新的jsFiddle以瞭解如何使用$.on(eventType, selector, callback)。你也可以閱讀jQuery API doc