Question

尝试构建一个仪表板，让我在链接和取消链接框时测试动画。一切正常，但是当我添加链接功能时，我发现链接在克隆父元素后不起作用。我希望它能够工作，这样当有人点击左框时，只要链接处于活动状态，右边两个框就会显示选择的动画。如果链接处于非活动状态，则未链接的框不会设置动画。 Using animate.css用于制作动画。

这是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();
    });
});

Answer 1

除了不需要多个文档就绪函数之外，事件处理程序仅应用于具有运行时存在的那些类的对象，因此克隆的对象不会获取它们。试试这个：

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

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

和

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

Answer 2

将此用于动态创建的元素：

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

克隆之后div内的按钮不起作用

2 个答案: