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

成功时，它会更新内容以重写我的Div

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加载的所有元素。所以你对head元素做同样的事情，等等。

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-request之后调用它一次。避免按照Uoli的建议触发document.ready，因为它会导致不可预测的副作用，因为所有$（document）.ready（function（）{blocks将再次执行。

Ajax回调刷新div

4 个答案: