javascript - jqueryクリックイベントが子で機能しない

Question

私は次のギャラリーを持っていますhttp://jsfiddle.net/GErnD/ カードをめくることができます。しかし、写真などの他の要素を入れたときにカードをめくるにはどうすればよいでしょうか?

私はslyとcss3dでjqueryを使用しています。

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");
  });

score 1 · Accepted Answer

.activeこれは、js が解析してアクションを実行するその瞬間に表示されるクラスを持つ要素にのみ onClick ハンドラーを割り当てたために発生します。要素がクラスを失う.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ドキュメントを読むこともできます

javascript - jqueryクリックイベントが子で機能しない

1 に答える 1

Related

Reference