Ajax回调刷新div

Question

我实现了一个Ajax回调函数来更新我的网页中的div（公告）。

它工作正常，但目前的问题是，Ajax调用函数更新公告div，但是，在重写内容后，此内容中的Javascript函数未加载它。因此，在更新内容后，表格中的切换功能不起作用。

我的Ajax调用函数

setInterval("_checkUpdate()", 2000); //2 seconds one call. 

function _checkUpdate() { 
    var callback=new Object(); 
    callback.success=this.checkUpdateonExternalSuccess; 
    callback.failure=this.checkUpdateonExternalFailure; 
    YAHOO.util.Connect.asyncRequest('GET' , '/ci/ajaxCustom/ajaxCheckUpdate',callback); 
}; 

如果成功，它将更新内容重写我的股利

function checkUpdateonExternalSuccess (o){ 
    if(o.responseText!==undefined) { 
     var str=o.responseText; 
     if(str !== 'nocontent') { 
      document.getElementById('updateContent').innerHTML=str; (Write the new content to my div) 
      location.reload(); //Reload the whole page, i do not want that 
     } 
    } 
}; 

它的工作原理，它写的JavaScript新的内容，但Javascript函数没有加载它。

的Javascript：

$(document).ready(function() { 
    //First hide all the contects except the headcontent 
    $(".content").hide(); 
    $(".headContent").show(); 

    //If user click on the head title, it hide/show content 
    $(".headTitle").click(function() { 
    collapseHeadContent();//reset all 
     var aParentTD= $(this).closest("td"); 
     var aHeadContent = aParentTD.find (".headContent"); 
     aHeadContent.toggle(); 
    }); 

    // If uses click on the title, it has toggle event for the content 
    $(".title").click(function() { 
     collapseContent(); //First reset all 
     var aParentTD = $(this).closest("td"); 
     var aContent = aParentTD.find(".content"); // Content in the same TD with Title 
     aContent.toggle(); 
    }); 

}); 

function collapseContent() { 
    //find the Head content to hide and reset of content 
    $(".headContent").hide(); 
    $(".content").hide(); 
} 

function collapseHeadContent() { 
    $(".content").hide(); 
} 

HTML：

<div id="annoucementTableDiv"> 
    <table id="annoucementTable"> 
    <tbody id="tdContent"> 
     <tr> 
    <td><span id="tdtitle"><a class="headTitle"> Forbidden: Error 403</a></span> <br /> 
     <span class="annfrom">PLC team - 19/08/2010 at 10:30<br /> </span> 
     <br /> 
     <span class="headContent"><P>Due to scheduled maintenance, HOME showed the error 403:<br/> 
    This is now resolved and customers can update again as normal </P> 
     </span> 
    </td> 
    </tr> 
    </tbody> 
    <tbody id="tdContent"> 
     <tr> 
    <td> 
     <span id="tdtitle"> 
    <a class="title">Downloading maps</a> 
     </span> <img src="/euf/assets/themes/standard/images/layout/important.png" class="alert_icon" alt="alert"></img><br /> 
     <span class="annfrom">Sent by 2nd line - 05/11/2009 at 15:30<br /> </span> 
     <span class="content">Since this morning it has been reported that multiple customers are again receiving this error message.<br /><br />This error has been escalated to the relevant teams with the highest priority and is currently being looked into. 
    An estimated time for a fix is not yet available but we will keep you updated. 
     </span> 
     <br /> 
    </td> 
    </tr> 
    </tbody> 
    </table> 
</div> 

如果我做location.reload，提供的JavaScript功能工作。但我不想刷新页面。

任何想法？

Answer 1

既然你也隐藏/显示的东西，我建议你改变你准备好处理成一个命名函数然后调用它document.ready，就像这样：

function loadFunc() { 
    $(".content").hide(); 
    $(".headContent").show(); 
} 

$(function() { 
    loadFunc(): 

    $(".headTitle").live('click', function() { 
    collapseHeadContent(); 
    $(this).closest("td").find(".headContent").toggle(); 
    }); 

    $(".title").live('click', function() { 
     collapseContent(); 
     $(this).closest("td").find(".content").toggle(); 
    }); 
}); 

这也采用.live()设置你的click功能一次。然后，当你做你的AJAX负荷，你可以叫loadFunc再次做隐藏/显示或任何其他工作，例如：

function checkUpdateonExternalSuccess (o){ 
    if(o.responseText!==undefined) { 
     var str=o.responseText; 
     if(str !== 'nocontent') { 
      document.getElementById('updateContent').innerHTML=str; 
      loadFunc(); 
     } 
    } 
}; 

Answer 2

听起来像你需要现场功能。这非常简单。

$('.title').live('click', function() { 
     collapseContent(); //First reset all 
     var aParentTD = $(this).closest("td"); 
    var aContent = aParentTD.find(".content"); // Content in the same TD with Title 
    aContent.toggle(); 

    }); 

基本上将点击处理程序添加到所有标题元素。即使另一个加载事件仍然与它相关联。对于页面生命周期中由AJAX加载的所有元素，您可以使用它。所以你对头元素也是这样。

Answer 3

在一个项目中，我此刻写，我插入HTML和Javascript内容分开。 HTML会像往常一样插入到innerHTML中。和我在一个JS文件的JavaScript，我在运行时加载到我的文件是这样的：

var newScript = document.createElement('script'); 
newScript.type = 'text/javascript'; 
newScript.src = 'myJavascriptFile.js'; 
headID.appendChild(newScript); 

Answer 4

包装你的表相关的代码放到一个功能上的document.ready调用它一次，你的AJAX请求后。避免触发Uoli所建议的document.ready，因为它可能会导致不可预知的副作用，因为所有的$（document）.ready（function（）{blocks将会被再次执行。