1

I am using bootstrap popover with jquery-raty. I have hidden div showing them on popover with JS function content:. I want to update some attribute in hidden div. Suppose I've data-rating attribute in hidden div. I want to update data-rating value. I am using following statement. 

('#hidden_div_1`).data('rating', '25');

When I print data attribute console.log($('#hidden_div_1').data('rating')); I get 25 which is correct. But when I hover again on particular object to display the popover I get old attribue values. Value is destroying when popover disappeared. I don't know why. Any anyone help?

This is my full jquery code. This is small jsfiddle

Thanks

EDIT 1: $('#hidden_div_1').data('rating', '25');

EDIT 2: It is strange. data-rating value is not changing. I've attached console.log output.

Console.log

Code > 

$('.link-container a').popover({
        content : function() { return $(this).siblings('.popover-content').html(); },
        trigger: 'click',
        html: true
    }).click(function(){
      $('.ratings').raty({
        score: function() { return $(this).attr('data-rating'); },
        click: function(score, evt, data) {
            //alert(score);
            var currentId = $(this).attr('id');
            console.log($("#"+currentId).data('rating'));
            alert(currentId);
            $("#"+currentId).attr('data-rating', score);
            console.log($("#"+currentId).data('rating'));
            $("#"+currentId).data('rating', score);
            console.log($("#"+currentId).data('rating'));

        },
          path: '/static/img/rating/',
      });
    });

alert(currentId); printing correct id.

4

2 に答える 2

2

編集

これをさらに詳しく調べたところ、問題はコンテンツを Bootstrap ポップオーバーに渡していることです。

この html コンテンツには ID (例: #hidden_div_1) が含まれていますが、問題は、Bootstrap ポップオーバーに渡すコンテンツがその popoverに複製されることです。

つまり、ID が重複することになり、JQuery は参照しようとしている要素を認識できなくなります。

したがって、解決策は、次のようにデータ情報をコンテナー div (この場合はlink-container) に入れることです。

<div class="link-container" data-rating="1" data-price="10">
    <a href="#" data-title="Title 1" id="r1">Click Here</a>
    <div class="temp-popover-content hidden">
        <p> Click on following images</p>
        <div class="ratings"></div>
        <p>Some content 1</p>
    </div>
</div>

そして、次のように、JQuery を混乱させることなく、このリンク コンテナーに対してデータを格納できます。

$('.link-container a').popover({
    content : function() { return $(this).siblings('.temp-popover-content').html(); },
    trigger: 'click',
    html: true
}).click(function(e) {
  // Added this because popovers get confused when more than one with a raty is open
  $('.link-container a').not(this).popover('hide');
  // storage refers to the link-container div
  var storage = $(this).parent();
  $('.ratings').raty({
        score: function() { return storage.data('rating'); },
        click: function(score, evt, data) {
            storage.data('rating', score);
            console.log("Data: "+storage.data('rating')); 
        }
  });
});

フィドルはこちらです。

于 2013-02-03T16:33:59.970 に答える
0

「$」が足りないようです。それはあるはずです

$('#hidden_div_1').data('rating', '25');
于 2013-02-03T12:04:53.520 に答える