JQuery On点击链接时没有被点击

时间:2013-06-20 20:21:20

标签: jquery

点击删除图片时,此行未被点击。 我希望它被击中.... $(“#basketItemsWrap ul li a”)。on(“click”,function(event){

$(document).ready(function() {
   $("#basketItemsWrap li:first").hide();

   $(".detail a").click(function() {
    var productIDValSplitter = (this.id).split("_");
    var productIDVal = productIDValSplitter[1];

    if ($('#product_' + productIDVal).hasClass('disabled'))
        return;

    var productX = $("#productImageWrapID_" + productIDVal).offset().left;
    var productY = $("#productImageWrapID_" + productIDVal).offset().top;

    if ($("#productID_" + productIDVal).length > 0) {
        var basketX = $("#productID_" + productIDVal).offset().left;
        var basketY = $("#productID_" + productIDVal).offset().top;
    } else {
        var basketX = $("#basketTitleWrap").offset().left;
        var basketY = $("#basketTitleWrap").offset().top;
    }

    var gotoX = basketX - productX;
    var gotoY = basketY - productY;

    var newImageWidth = $("#productImageWrapID_" + productIDVal).width() / 3;
    var newImageHeight = $("#productImageWrapID_" + productIDVal).height() / 3;

    $("#productImageWrapID_" + productIDVal + " img")
            .clone()
            .prependTo("#productImageWrapID_" + productIDVal)
            .css({'position': 'absolute'})
            .animate({opacity: 0.4}, 100)
            .animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
        $(this).remove();

        $("#notificationsLoader").html('<img src="../img/loader.gif">');

        $.ajax({
            type: "POST",
            url: "../ajax/basket.php",
            data: {productID: productIDVal, action: "addToBasket"},
            success: function(theResponse) {

                if ($("#productID_" + productIDVal).length > 0) {
                    $("#productID_" + productIDVal).animate({opacity: 0}, 500);
                    $("#productID_" + productIDVal).before(theResponse).remove();
                    $("#productID_" + productIDVal).animate({opacity: 0}, 500);
                    $("#productID_" + productIDVal).animate({opacity: 1}, 500);
                    $("#notificationsLoader").empty();


                } else {
                    $("#basketItemsWrap li:first").before(theResponse);
                    $("#basketItemsWrap li:first").hide();
                    $("#basketItemsWrap li:first").show("slow");
                    $("#notificationsLoader").empty();
                    $("#product_" + productIDVal).removeClass("enabled");
                    $("#product_" + productIDVal).addClass("disabled");
                }

            }
        });

    });
 });

 $("#basketItemsWrap ul li a").on("click", function(event) {
    var productIDValSplitter = (this.id).split("_");
    var productIDVal = productIDValSplitter[1];

    $("#notificationsLoader").html('<img src="../img/loader.gif">');

    $.ajax({
        type: "POST",
        url: "../ajax/basket.php",
        data: {productID: productIDVal, action: "deleteFromBasket"},
        success: function(theResponse) {

            $("#productID_" + productIDVal).hide("slow", function() {
                $(this).remove();
            });

            $("#notificationsLoader").empty();

        }
    });
});

});

<div id="basketItemsWrap">
        <ul>
            <li id="productID_1" style="display: list-item;"><a onclick="return false;" href="../Ajax/basket.php?action=deleteFromBasket&amp;productID=1"><img id="deleteProductID_1" src="../img/delete.png"></a> name </li><li style="display: none;"></li>
        </ul>
    </div>

1 个答案:

答案 0 :(得分:3)

看起来你正在动态添加元素,在这种情况下你需要使用事件委托,如:

$(document).on("click", "#basketItemsWrap ul li a", function(event) {

理想情况下,您希望绑定到DOM中的现有元素,而不是document附近动态添加的元素。