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 </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>
<!-- 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');
});
ありがとうございましたveidelis、それは正常に動作しました。私は2つのjQuery elemtsを持っています。私はlive()に変換したいと思います。私は主な質問を編集しました。同じことを達成するのを手伝ってください。私は自分自身を編集しようとしましたが、それは面白い結果をもたらします:(文書の準備機能内に同封されている可能性があります) –
これらのイベントは$ .ready()かどうかにかかわらず正しく動作するはずです。 [$ .delegate()](http://api.jquery.com/delegate/) – veidelis
上記の私の質問で編集したコードを確認してください(edit2)。私はホバーの2つの機能を持っています...間違っていれば修正してくださいmouseenterイベントが処理されているようですが、ライブやデリゲート機能を使ってカラーボックスプラグインを使用するにはどうすればいいですか? –