Ajax callback refresh 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);
};

В случае успеха, он обновляет содержимое, чтобы переписать в мой 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

Оберните связанный с таблицей код в функцию и вызовите его один раз в document.ready и после вашего ajax-запроса.Избегайте запуска document.ready, как предлагает Uoli, потому что это может вызвать непредсказуемые побочные эффекты, так как все ваши $ (document) .ready (function () {блоки будут выполнены снова.

Answer 3

В проект, который я сейчас пишу, я вставляю контент HTML и Javascript отдельно. HTML-код вставляется как обычно в innerHTML. И я получил javascript в JS-файле, который я загружаю в свой документ во время выполнения, например:

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

Answer 4

Похоже, вам нужна живая функция. Это довольно просто.

  $('.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 и т. Д.