Question

在我的一个应用程序中，我从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方法完成，但不知道如何使用它。

Answer 1

您应该在此行之后运行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选择器或类似事件相关的事件。它不会检查页面上是否有更改。此外，在较新版本的jQuery中不推荐使用.live。您应该使用.on代替。

将动态插入的元素绑定到DOM并在其上执行插件

1 个答案: