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

Question

我在自动更新 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');
        });

Answer 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;
      });
 });

Answer 2

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