2011-08-13 6 views
0

divの自動更新に問題があります。私は1分ごとにページの内容(facebookのような)をリフレッシュする下記のようなスクリプトを持っています。問題は、このdivがページに新たに追加され、エフェクトを追加するためのajax/jQuery要素がいくつか含まれていることです。以下はwindow.setInterval(、1000 * 60)メソッドを使用して追加された要素にjQuery/AJAXスクリプトを添付する

function loadNewPosts(){ 
     var id = $(".altbgcolor:first").attr("id"); 

     $.get('/update.php', { updateid: id ,catid:'technology' }, function(data){ 
           $(".newslist").prepend(data); 
          }, 'html'); 
    } 

    window.setInterval(loadNewPosts, 1000*60) 

その上記のコードは、1分ごとにupdate.phpをを呼び出し、現在のページに要素を追加しますがupdate.phpを

<li class="altbgcolor" id=755> 
        <div> <a href=http://mashup2.sunnydsouza.com/technology/755/ target="_blank" rel="nofollow"> 
         <div class="newsthumb" center center no-repeat;"><img src="http://mashup2.sunnydsouza.com/timthumb.php?src=/images/tech/thumb-755.jpg&h=100&w=100&zc=1&a=t" /></div> 
         </a> 


         <div class="newstext" style="margin:0px;"> 

         <a href=http://mashup2.sunnydsouza.com/technology/755/full/ target=_blank style="text-decoration:none; "><h1 style="color:#081C28;"><img width="11" height="9" src="/content/icon_topic_newest.gif"> Top 5 Android Apps for Travel &nbsp;</h1></a> 
         <!--<i><font color=red size=1.2>Technology</font></i><br>--> 

        <div style="font-size: 0.4em; color:#666666;"> 
         <!-- AddThis Button BEGIN --> 
         <!--<span class="st_email" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span> 
         <span class="st_facebook" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span> 
         <span class="st_twitter" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span> 
         <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> 
         <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=sunnydsouza"></script>--> 
         <!-- AddThis Button END --> 



         <span style="text-decoration:none; color:none; "><i> via <a href="#" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">demo1</a></i></span>       

         <span style="text-decoration:none; color:none; "> 
         <a class="example7" href="comments_3.php?id=755" style="text-decoration:none; color:#666666; "><img src="content/comment/comments.png" width=18 height=18><i>No comments</i></a></span> 

         <span style="text-decoration:none; color:none; margin:5px;"><img src="content/voting/eye.png" > 17</span>       
         <!-- Vote Buttons #vote--> 


         <span class="vote" id="755" name="up" style="text-decoration:none; color:none; margin:5px; "> 
         <img src="/content/voting/yes-enb.png" width=12 height=12 alt=""> 
         <span style="text-decoration:none; color:none">1 </span></span> 

         &nbsp; 



         <!-- Vote Buttons ENDS #vote--> 
         <br> 
         <i><font color=red size=1.2>Technology</font></i> 

         </div> 

         <!--<h1><a href=http://mashup2.sunnydsouza.com/technology/755/full/ class="more" target="_blank" rel="nofollow">read...</a></h1>--> 


         </div><div class="clear"></div> 
        </div> 

        <div class="sharedp"> 
         <span class="st_email" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span> 
         <span class="st_facebook" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span> 
         <span class="st_twitter" st_url="http://mashup2.sunnydsouza.com/technology/755/" st_title="Top 5 Android Apps for Travel" ></span> 
        </div> 
        </li> 

経由で見つかった場合移入することになってdiv要素の一例です。現在のdivがこれがダウンコード

スパンクラス=「投票」 //親指アップ/親指に最初にすべての要素上のすべてのdivに自分自身を添付し、メインページ上のJavaScriptでJavaScriptの要素に

欠いています

$(function() { 
      $(".vote").click(function() 
      { 
      var id = $(this).attr("id"); 
      var name = $(this).attr("name"); 
      var dataString = 'id='+ id ; 
      var parent = $(this); 

      if (name=='up') 
      { 
      //$(this).fadeIn(200).html('<img src="/content/voting/yes-enb.JPG" />'); 
      $.ajax({ 
      type: "POST", 
      url: "up_vote.php", 
      data: dataString, 
      cache: false, 

      success: function(html) 
      { 
      parent.find('span').html(html); 
      } 
      }); 
      } 

return false; 
}); 
}); 

ただし、自動更新中に追加された新しい要素の場合は、投票ボタンをクリックしても何も起こりません。

なぜこれが起こっているのですか?自動で新しく追加されたdivで動作しないjQueryがページの先頭に表示されるのはなぜですか?

私は2つのより多くのjavascriptの要素を持っている

EDIT ::を助けてください。どのように私はそれらを.liveに変換するのですか?

 $(document).ready(function(){ 


    $(".altbgcolor").hover(function() { 
      $(this) 
       .addClass('altbgcolor-active') 
       .find(".sharedp") 
       .slideDown('slow'); 
     },function() { 
      $(this) 
       .removeClass('altbgcolor-active') 
       .find(".sharedp") 
       .slideUp('slow'); 
     }); 
$(".example7").colorbox({ 
      onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
      onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
      onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
      onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
      onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
)}; 

}); 

EDIT2:これは私がしようとしています何でその正しい...

$(".altbgcolor").live('hover',function() { 
      $(this) 
       .addClass('altbgcolor-active') 
       .find(".sharedp") 
       .slideDown('slow'); 
     },function() { 
      $(this) 
       .removeClass('altbgcolor-active') 
       .find(".sharedp") 
       .slideUp('slow'); 
     }); 

答えて

1
$(function() { 
     $(".vote").live('click', function() { 
      var id = $(this).attr("id"); 
      var name = $(this).attr("name"); 
      var dataString = 'id='+ id ; 
      var parent = $(this); 
      if (name=='up') 
      { 
       $.ajax({ 
        type: "POST", 
        url: "up_vote.php", 
        data: dataString, 
        cache: false, 
        success: function (html) { 
         parent.find('span').html(html); 
        } 
       }); 
      } 
      return false; 
     }); 
}); 
+0

ありがとうございましたveidelis、それは正常に動作しました。私は2つのjQuery elemtsを持っています。私はlive()に変換したいと思います。私は主な質問を編集しました。同じことを達成するのを手伝ってください。私は自分自身を編集しようとしましたが、それは面白い結果をもたらします:(文書の準備機能内に同封されている可能性があります) –

+0

これらのイベントは$ .ready()かどうかにかかわらず正しく動作するはずです。 [$ .delegate()](http://api.jquery.com/delegate/) – veidelis

+0

上記の私の質問で編集したコードを確認してください(edit2)。私はホバーの2つの機能を持っています...間違っていれば修正してくださいmouseenterイベントが処理されているようですが、ライブやデリゲート機能を使ってカラーボックスプラグインを使用するにはどうすればいいですか? –

1

あなたはjQueryのlive()このためと考えられている場合は、有効にしてください?イベントハンドラをに、現在および将来のすべての要素に添付します。

+0

上記を変換して.live()としてマップするにはどうすればよいですか?少し助けてください。迅速な応答ありがとう –

関連する問題