将jQuery/AJAX脚本附加到使用窗口添加的元素上.setInterval(， 1000*60)方法

Attaching jQuery/AJAX scripts to elements added using window.setInterval(, 1000*60) method

本文关键字：setInterval 元素 1000 方法 添加 脚本 AJAX jQuery 窗口      更新时间：2023-09-26

我有一个自动更新div的问题。我有一个脚本如下所示，每1分钟刷新页面内容(如facebook)。问题是这个div是新添加到页面的，并且它包含一些ajax/jQuery元素来添加效果。

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)

下面是一个div的例子，它应该填充如果通过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>

虽然上面的代码每1分钟调用一次update.php并向当前页面添加元素。当前的div在javascript元素

上是没有的。

这是主页上的javascript，它将自己附加到每个元素的每个div上，最初到span class="vote"//支持/不支持代码

$(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;
 });
 });

然而，对于自动更新期间添加的新元素，当点击投票按钮时，什么也没有发生。

为什么会这样?为什么在页面开始时提到的jQuery不能用于自动添加的div ?

请帮

编辑::我有2个javascript元素。如何将它们转换为。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');
        });

$(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;
      });
 });

您考虑过jQuery的live()吗?它将把事件处理程序附加到所有当前和未来的元素。

相关文章：