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

Question

我有这个加载 ajax 的#container，我正试图让它与我的一些插件一起玩得很好。到目前为止，我设法让 scrollTo 和一个灯箱使用 jquery.live 在这个“死亡容器”内工作，但我喜欢的“添加到购物车”按钮没有运气。几天来，我一直在玩 .delegate、livequery 插件等，但我真的不够先进，无法弄清楚什么地方去哪里了。 （我对自己在做什么的理解很肤浅。）

这是我的购物车插件，它相当小而简单。您能否就应该在哪里插入什么（.live、.delegate 或 .livequery，或者可能完全是其他东西）提出建议？

（注意：shopme p = 添加到购物车按钮，需要将其插入加载 ajax 的“死亡容器”中。购物车的其余部分存在于所述容器之外并且工作正常，因为它没有被 ajax 插入.)

$(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(){

而不仅仅是点击。