div內的按鈕不起作用克隆後

試圖構建一個儀表板，讓我在鏈接和取消鏈接框時測試動畫。得到了一切工作，但是當我添加鏈接功能時，我發現在父元素被克隆後鏈接不起作用。我希望它能夠工作，以便當有人點擊左邊的框時，只要鏈接處於活動狀態，右邊的兩個框就會顯示所選的動畫。如果鏈接處於非活動狀態，則未鏈接的框不會生成動畫。動畫爲Using animate.css。div內的按鈕不起作用克隆後

這裏的HTML：

<div id="animations-container"> 
    <center> 
    <button name="slideInLeft" class="animation-selector selected">Slide In Left</button> 
    <button name="slideInDown" class="animation-selector">Slide In Down</button> 
    <button name="zoomInUp" class="animation-selector">Zoom In Up</button> 
    <button name="zoomIn" class="animation-selector">Zoom In</button> 
    <button name="pulse" class="animation-selector">Pulse</button> 
    <button name="wobble" class="animation-selector">Wobble</button> 
    <button name="shake" class="animation-selector">Shake</button> 
    </center> 
</div> 
<div id="container"> 
    <div id="graphs"> 
     <a href=# class="linked-button"><div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div></a> 
     <div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div> 
     <div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div> 
    </div> 
    <div style="clear:both;"></div> 
</div>

，這裏是我的jQuery：

<script> 
$(function() { 
    $(".linked-button").on('click', function() { 
     $('.linked').remove().clone(true, true).appendTo('#graphs'); 
    }); 
}); 
$(function() { 
    $(".animation-selector").on('click', function() { 
     var animation = $(this).attr("name") 
     // console.log("changeclass"); 
    $(".linked").removeClass().addClass('linked block animated'); 
    $(".linked").addClass(animation); 
    $("#animations-container :button").removeClass('selected'); 
    $(this).toggleClass('selected') 
    }); 
}); 
$(function() { 
    $(".link-icon").on('click', function() { 
     $(this).toggleClass('faded'); 
     $(this).parent().toggleClass('linked'); 
    }); 
});

也複製了它的jsfiddle：https://jsfiddle.net/3hjfj/

更新 - 工作！謝謝 - 這是我的第一個stackoverflow問題 - 很高興讓我的櫻桃彈出。下面是新的代碼：

$(function() { 
    $('body').on('click', '.linked-button', function() { 
     $('.linked').remove().clone(true, true).appendTo('#graphs'); 
    }); 
    $('body').on('hover', '.linked-button', function() { 
     $('.link-icon').toggleClass("link-hover"); 
    }); 
    $('body').on('click', '.animation-selector', function() { 
     var animation = $(this).attr("name") 
      // console.log("changeclass"); 
     $(".linked").removeClass().addClass('linked block animated'); 
     $(".linked").addClass(animation); 
     $("#animations-container :button").removeClass('selected'); 
     $(this).toggleClass('selected') 
    }); 
    $('body').on('click', '.link-icon', function() { 
     $(this).toggleClass('faded'); 
     $(this).parent().toggleClass('linked'); 
     $('.transparent-blue').fade(); 
    }); 
    $('body').on('mouseenter', '.link-icon', function() { 
     $('.transparent-blue').show(); 
    }); 
    $('body').on('mouseleave', '.link-icon', function() { 
     $('.transparent-blue').hide(); 
    }); 
});

來源

2015-06-17 Chris Baily

小提琴有不同的代碼比這裏提供的一個。 – Sushil

克里斯，在上面的html中，你爲兩個div設置了相同的id「linked」，這可能帶來問題，試圖離開沒有id的div。 –

感謝里卡多 - 剛剛學習 - 直到我開始意識到如何在jQuery中使用ID和類別時才知道它 –

使用該動態創建的元素：

$('body').on('click', '.animation-selector', function() { 
    // do something 
}); 
$('body').on('click', '.link-icon', function() { 
    // do something 
});

來源

2015-06-17 19:34:07 yuk

這工作！非常感謝！ –

除了不需要多文檔準備功能，事件處理程序僅適用於與那些存在於類對象它們運行的時間，所以克隆的對象不會得到它們。試試這個：

$("document").on("click", ".link-icon", function() { 

$("document").on("click", ".animation-selector, function() {

和

$("document").on("click", ".linked-button", function() {

來源

2015-06-17 19:34:10

出於某種原因，這不適用於「文檔」 - 從下面評論使用的身體，它的工作。可能只是我是愚蠢的，並沒有寫出正確的代碼 - 查看上面關於工作代碼的更新問題。 –

div內的按鈕不起作用克隆後

回答

相關問題