Question

这是我的JS。我不知道为什么附加到最后一个孩子创建的“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函数中绑定了click事件。因此，第一次单击时只需绑定事件（然后绑定越来越多的事件处理程序）..

取而代之的是删除delC函数，并首先委派删除事件：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你不需要在href上调用单独的函数。您可以将其绑定到单击功能。

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

工作JsFiddle http://jsfiddle.net/j65uex6t/

Answer 3

这应该可以解决问题

Fiddle

$(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">x</a>');
        $(".dump").removeClass("dump")
    });

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

});

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

3 个答案: