0

私のアプリケーションの1つで、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 に答える