Question

我有这个装有ajax的#container，我正试图让它与我的一些插件玩得很好。到目前为止，我设法使用jquery.live让scrollTo和一个灯箱在这个“死亡容器”内工作，但是我的花哨的“添加到购物车”按钮没有运气。我一直在玩.delegate，livequery插件等几天，但我真的不够先进，无法弄清楚到底发生了什么。（我对我正在做的事情有一个非常浅薄的理解。）

这是我的购物车插件，它相当小而且直截了当。你能给出什么（.live，.delegate，或者.livequery，或者其他可能完整的东西）应该在哪里插入的建议？

（注意：shopme p =添加到购物车按钮，需要插入装载ajax的“死亡容器”。购物车的其余部分存在于所述容器外面并且工作正常，因为它不是ajax'ed in 。）

$(document).ready(function(){

$('.wooo').bloooming_shop();

$('body').append('<div id="panel"><div id="panelcontent"></div><div class="panelbutton" id="hidepanel" style="display: none;"><a><font class="cartfont2">hide cart</font></a></div></div><div id="showpanel" class="panelbutton" style="display: visible;"><a><font class="cartfont">shopping cart</font></a></div><div id="btntarget"></div>');
$('#panelcontent').hide();

$.ajax({
    type: "GET",
    url: "/wooo/cart.php",
    async: false,
    dataType: "html",
    success: function(html){
        $('#panelcontent').html(html);
    }
});



$(".panelbutton").click(function(){
    $("#panel").animate({
        height: "200px"
    }, "fast",function(){
        $('#panelcontent').show();
    });
    $("#hidepanel").fadeIn();
    $("#showpanel").fadeOut();

}); 

  $("#hidepanel").click(function(){
    $("#panel").animate({
        height: "0px"
    }, "fast", function(){ 
        $("#showpanel").fadeIn();
        $('#panelcontent').hide();
    });

    $("#hidepanel").fadeOut();
   });  


   // START 'ADD TO CART' BUTTONS

$('.shopme p').click(function(){

    var pid = $(this).attr('rel');

    $('body').prepend('<div class="shadow" id="'+$(this).attr('rel')+'_shadow"></div>');

    var shadow = $('#'+pid+'_shadow');

        shadow.width($(this).parent().css('width')).height($(this).parent().css('height')).css('top', $(this).parent().offset().top).css('left', $(this).parent().offset().left).css('opacity', 0.5).show();
     shadow.css('position', 'absolute');

     shadow.animate( {
            width: $('#btntarget').innerWidth(), 
            height: $('#btntarget').innerHeight(), 
            top: $('#btntarget').offset().top, 
            left: $('#btntarget').offset().left 
            }, { 
            duration: 2000 
            } )
        .animate({ 
            opacity: 0 
        },
        { 
        duration: 700,
        complete: function(){

        shadow.remove();

    }

    });

    var option = $('#'+pid+' .woooptions').val();

    var formData = 'pid=' + pid + '&option=' + option; 

    $.ajax({
        type : 'POST',
        url : '/wooo/cart.php',
        data : formData,
        success : function (html) {
            $('#panelcontent').html(html);
        }
    });


}); 


$('.removeitem').live('click', function() { // .LIVE is used here   
    rid = $(this).attr('id');
    rop = $(this).attr('rel');

    var remData = 'remove=' + rid + '&rop=' + rop; 

    $.ajax({
        type : 'POST',
        url : '/wooo/cart.php',
        data : remData,
        success : function (html) {
            $('#panelcontent').html(html);
        //  alert('thx');
        }
    });

});




}); // document

function checkOut(){
        jQuery.ajax({
          url: "/wooo/cart.php",
          type: "POST",
        data : "destroysession=true",
          success: function(data, textStatus, jqXHR){
            if(data){
                window.location.href=jQuery('a.checkout').attr("data-href");
            }else{
                console.log("There is no data!")
            }
          },
          error: function(jqXHR, textStatus, errorThrown){
            console.log("AJAX ERROR: "+errorThrown)
          }
        });
}

/** replace ******/

jQuery.fn.bloooming_shop = function(){

    this.each(function(){

        var elem = $(this);

        var cl = 'bt1';
        var id = $(this).html();
        var opt = $(this).attr('options');
        var text = $(this).attr('text');
        var price = $(this).attr('price');
    //  alert(price);

        if (text == undefined) {
            text = 'add to cart';
        }

        if (opt == 'true' && price != 'true' ) {
            cl = 'bt3';
        }

        if (price == 'true' && opt == 'true') {
            cl = 'bt4';
        }

        if (price == 'true' && opt != 'true') {
            cl = 'bt2';
        }

        elem.removeClass('wooo');
        elem.addClass('shopme');
        elem.addClass(cl);
        elem.attr('id','pid'+id);
        elem.html('<p rel="pid'+id+'" class="'+cl+'">'+ text +'</p>');

        // get product data
        if (price == 'true' || opt == 'true') {

            $.ajax({
                type : 'GET',
                url : '/wooo/functions.php?mode=p_data&id='+id+'&opt='+opt+'&price='+price,
                success : function (html) {

                    elem.append(html);

                    if (jQuery().sSelect) {
                            elem.children('.woooptions').sSelect();
                     } 

                    // change price
                    $('.woooptions').change(function(){
                        var selid = $(this).attr('id');
                        var rel = $('#'+selid+' option:selected').attr('rel');

                        if (rel != undefined) {
                              $(this).parent().children('.woooprice').html(rel);
                        }
                    });

                }
            });
        }

    });

return false;

};

即使在ajax'ed-in #container中，如何让这个插件保持活着？我真的只需要'添加到购物车'按钮（shopme p）在所述容器div中。谢谢。

Answer 1

.live("click", function(){

而不是单击。

获取.live或.delegate或livequery插件以保持购物车活着

1 个答案: