javascript - 我的 JS 在第二次点击时工作

Question

这是我的JS。我不知道为什么通过附加到最后一个 child 创建的“X”在第一次点击时不起作用，但它在第二次点击时起作用。 “x” url 在克隆的 div 中。这是导致问题的原因吗？还是 HTML 有问题？

$(document).ready(function () {
    $(".add").click(function () {
        var aaa = $(this).parent("div").attr('id')
        $(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
        $(this).removeClass("add").addClass("added");
        $(".dump:last-child").append('<a class="delC" href="javascript:delC()">x</a>');
        $(".dump").removeClass("dump")
    });

})

////////////////
function delC() {
    $(document).on('click', '.delC', function () {
        var xx = $(this).parent("div").attr('class')
        $("." + xx + "").remove()
    })
}

<div id="itemA">
    <div class="detail">USB</div>
    <div class="name">USB type1</div>
    <div class="price">1500</div>
    <div class="weight">20 Gr</div>
<a class="add">add</a>

</div>
<div id="itemB">
    <div class="detail">RAM</div>
    <div class="name">RAM type1</div>
    <div class="price">2000</div>
    <div class="weight">50 Gr</div>
<a class="add">add</a>

</div>
<div class="CART"></div>

Answer 1

问题是您在 delC 函数中绑定(bind)了点击事件。所以你第一次点击你只是绑定(bind)事件(然后你绑定(bind)越来越多的事件处理程序)..

取而代之的是删除 delC 函数并首先委托(delegate) delete 事件:

$(document).ready(function () {
    $(".add").click(function () {
        var aaa = $(this).parent("div").attr('id')
        $(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
        $(this).removeClass("add").addClass("added");
        $(".dump:last-child").append('<a href="#" class="delC">x</a>');
        $(".dump").removeClass("dump");
    });

})

$(document).on('click', '.delC', function () {
    var xx = $(this).parent("div").attr('class')
    $("." + xx + "").remove()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="itemA">
    <div class="detail">USB</div>
    <div class="name">USB type1</div>
    <div class="price">1500</div>
    <div class="weight">20 Gr</div> <a class="add">add</a>
</div>
<div id="itemB">
    <div class="detail">RAM</div>
    <div class="name">RAM type1</div>
    <div class="price">2000</div>
    <div class="weight">50 Gr</div> <a class="add">add</a>

</div>
<div class="CART"></div>