javascript - jquery 没有正确附加计数

Question

我想用 jquery 动态创建行，并为每个新行添加一个从 1 到 2 等的计数，但是当我点击添加行时，第一次点击会很好，但之后它会依赖现有的行和我只需要 1、2、3、4、5 等。我做错了什么？

fiddle :Click

HTML:

<div class="row">I'm a row<p></p></div>

<a href="#" class="add_row">Add Row</a>

CSS:

.row {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    background-color: slateGrey;
    float: left;
}

a.add_row {
    float: left;
}

JQUERY:

$("a.add_row").click(function() {

                var $row = $("body .row").first().html();

                var $remove_row = ("<a href='#' class='remove_row'>remove</a>");

                $(this).before("<div class='row'>"+ $row +"</div>");

                $(this).prev().append($remove_row);

                var count = 0;

                $(".remove_row").click(function() {

                    var $remove = $(this).parent();

                    $remove.remove();

                    return false;
                });

                $(".row").each(function() {
                    count++;

                        $(this).append(count);

                });

                return false;

            });

Answer 1

我已经重构了您的代码以实现该功能。就这样

HTML:

<div class="container">
    <div class="row">
        <p>I'm a row</p>
    </div>

</div>
<a href="#" class="add_row">Add Row</a>

JS:

var count = 0;
$("a.add_row").click(function() {

                var remove_row = ("<br><a href='#' class='remove_row'>remove</a>");


                count++;
              var cloned = $('.container').children('.row').first().clone();     
    cloned.appendTo('.container');



    cloned.find('p').append(count);
    cloned.find('p').append(remove_row);
});

$('body').on('click', '.remove_row', function(){
    $(this).closest('.row').fadeOut();
    count--;

});

演示:Fiddle