Question

当我们动态添加step和heading并尝试使用向上和向下箭头分别上下移动其位置时，会出现故障。

HTML

<div class="makeit_steps"></div>
<div class="row margin-top">
    <div class="col-md-12">
        <div class="col-md-2">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span id="add-step" class="add-new">Add Step</span>
        </div>
        <div class="col-md-2">
            <span class="glyphicon glyphicon-plus-sign"></span>
            <span id="add-heading" class="add-new">Add Heading</span>
        </div>
    </div>
</div>

JavaScript的：

动态添加步骤：

$('#add-step').click(function () {
$('.makeit_steps').append('<div class="row moving"><div class="col-md-12"><span class="steps">Step</span><span><textarea class="form-control" rows="3" cols="105"></textarea></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>');
$('.step_remove').click(function () {
    $(this).closest('.moving').remove();
});
$(".glyphicon-circle-arrow-up").click(function () {
    var $current = $(this).closest('.moving')
    var $previous = $current.prev('.moving');
    distance = $current.outerHeight();
    if ($previous.length !== 0) {

        $.when($current.animate({
            top: -distance
        }, 600),
        $previous.animate({
            top: distance
        }, 600)).done(function () {
            $previous.css('top', '0px');
            $current.css('top', '0px');
            $current.insertBefore($previous);
        });
    }
    return false;
});

$(".glyphicon-circle-arrow-down").click(function () {
    var $current = $(this).closest('.moving')
    var $next = $current.next('.moving');
    distance = $current.outerHeight();
    if ($next.length !== 0) {
        $.when($current.animate({
          top: distance
}, 600),
$next.animate({
    top: -distance
}, 600)).done(function () {
    $next.css('top', '0');
    $current.css('top', '0');
            $current.insertAfter($next);
            animating = false;
        });
    }
    return false;
});
});

动态添加标题：

$('#add-heading').click(function () {
$('.makeit_steps').append('<div class="row moving"><div class="col-md-12"><span class="step_heading">Heading</span><span><input type="text" ></input></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>')
$('.step_remove').click(function () {
    $(this).closest('.row').remove();
});
var animating = false;
$(".glyphicon-circle-arrow-up").click(function () {
    if (animating) {
        return;
    }
    var $current = $(this).closest('.moving')
    var $previous = $current.prev('.moving');
    distance = $current.outerHeight(true);
    if ($previous.length !== 0) {

        animating = true;
        $.when($current.animate({
            top: -distance
        }, 600),
        $previous.animate({
            top: distance
        }, 600)).done(function () {
            $previous.css('top', '0px');
            $current.css('top', '0px');
            $current.insertBefore($previous);
            animating = false;
        });
    }

});
$(".glyphicon-circle-arrow-down").click(function () {
    if (animating) {
        return;
    }
    var $current = $(this).closest('.moving')
    var $next = $current.next('.moving');
    distance = $current.outerHeight();
    if ($next.length !== 0) {

        animating = true;
        $.when($current.animate({
            top: distance
}, 600),
$next.animate({
    top: -distance
}, 600)).done(function () {
    $next.css('top', '0');
    $current.css('top', '0');
            $current.insertAfter($next);
            animating = false;
        });
    }
});
});

CSS

.margin-top {
    margin-top:20px;
}
.glyphicon.glyphicon-circle-arrow-up, .glyphicon.glyphicon-circle-arrow-down {
    font-size:30px;
    margin-left:25px;
    cursor:pointer;
}
.add-new {
    color:#007acc;
    cursor:pointer;
}
.steps {
    font-size:16px;
    padding-left:30px;
    padding-right:20px;
}
.step_remove {
    font-size:16px;
    color:#007acc;
    margin-left:15px;
    cursor:pointer;
}
.step_heading {
    padding-left:15px;
    font-size:16px;
    padding-right:10px;
}
.makeit_steps {
    position: relative;
}
.makeit_steps .moving {
    position:relative;
}
.moving span {
    display:inline-block;
    vertical-align: middle;
}

小提琴：Here

Answer 1

当前代码的问题在于，无论何时动态创建新箭头，它都会在上下箭头（现有箭头）上多次绑定click事件。

为了仅在新添加的元素上附加click事件，您应该创建要添加的新元素的对象，然后您可以进一步使用它

var el = $('<div class="row moving"><div class="col-md-12"><span class="steps">Step</span><span><textarea class="form-control" rows="3" cols="105"></textarea></span><span class="glyphicon glyphicon-circle-arrow-up"></span><span class="glyphicon glyphicon-circle-arrow-down"></span><span class="step_remove">X</span></div></div>');
$('.makeit_steps').append(el);

在追加新元素后，需要在上下箭头上指定点击事件，你应该这样做

对于向上箭头

$('.glyphicon glyphicon-circle-arrow-up',el).on('click',function(){

对于向下箭头

$('.glyphicon-circle-arrow-down',el).on('click',function(){

您可以看到应用click事件时使用的e1对象。以上行仅在附加的新元素中搜索向上和向下箭头，并将分配事件。

工作演示在这里 - http://jsfiddle.net/m86p420h/7/

在动画添加元素的动画时出现故障

1 个答案: