0

在我的一个应用程序中，我从 php 获取 json 数据并使用 ajax/jquery 渲染 html

我使用一些星级插件呈现产品列表。问题是该插件在最初通过页面刷新呈现时工作正常。当我应用价格过滤器（这实际上获取 json 并使用 ajax 呈现）时，插件停止工作，因为它无法绑定到使用 ajax 动态插入的列表。

插件初始化代码是这样的

jQuery.noConflict ();
var jq = jQuery;
jq(document).ready(function(e) {
    jq('.auto-submit-starc').rating({
        callback: function(value, link){
            product_id=this.name;
            rating=value;
            jq.post('<?PHP echo base_url();?>index.php/showproducts/awardRating',{id:product_id,rating:rating},function(data){});
        }
    });   
});

这就是获取 json 的内容：

    // Price range
('select#valueA, select#valueB').selectToUISlider({
    labels:8,
    sliderOptions: {
        stop: function(e,ui) {
            jq(".list-items").css('width','100%').css('height','700px').css('background-color','#EFEFEF').css('opacity','0.5').css('text-align','center').html("<img src='http://tharhandloom.in/images/preloader.gif'/>");

            var startk = jq('#valueA').val();
            var endk = jq('#valueB').val();

            var start=startk.replace('k', '000')
            var end=endk.replace('k', '000')

            var catid="<?PHP echo @$category['id'];?>";   
           jq.post('<?PHP echo base_url()?>index.php/showproducts/ajaxFilterProducts',
                   {start:start,end:end,catid:catid},
                   function(data){          
                       var json=jQuery.parseJSON(data);                
                       var html="";
                       jq(json).each(function(index,element){
                           if(element.name.length>21)
                               productName=element.name.substring(0,21)+"...";
                           else
                               productName=element.name;
                           html+='<div class="single-item"><span class="title"><a href="#">'+productName+'</a></span><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="1"/><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="2" id="rate_second"><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="3" id="rate_third" /><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="4" id="rate_fourth" /><input class="auto-submit-starc" type="radio" name="'+element.id+'" value="5" id="rate_fifth"/><span class="price">Rs '+element.price+'</span><img src="http://tharhandloom.in/product_images/thumbnails/'+element.product_image+'" alt="Item"/><div style="text-align:center"><a href="<?PHP echo base_url();?>cart/'+element.id+'" class="general-button float-left"><span class="button">Add to cart</span></a></div><br class="clear"/></div>';     
                        });
                        jq(".list-items").css('background-color','').css('opacity','').css('text-align','').css('width','').css('height','').html(html);

                    });

             }
         }          
});

可以看出，在 html 中我正在插入单选按钮。该插件实际上捕获了单选按钮的类别并将功能应用于它们。但是当通过 ajax 插入新的单选按钮时，插件无法捕获那里的类。

我想它可以用 .live 方法完成，但不知道如何使用它。

4

1 回答 1

0

您应该简单地jq('.auto-submit-starc').rating(...);在此行之后运行：

jq(".list-items").css('background-color','').css('opacity','').css('text-align','').css('width','').css('height','').html(html);

.live是绑定事件，它不会帮助您应用插件，因为它只是捕获所有事件document并查找与event.target选择器或类似内容相关的事件。它不检查页面上是否有更改。此外，.live在较新版本的 jQuery 中已弃用。你应该.on改用。

于 2012-11-13T08:36:47.863 回答