使用 AJAX/jquery 加载内容,并且仍然能够在生成的 DOM 上使用其他 JavaScript 函数


Loading content with AJAX/jquery, and still be able to use other javascript functions on the generated DOM

我做了一个用PHP动态创建的表。

它基本上看起来像这样。

<table class="persist-area table table-bordered ">
    <thead>
        <tr class="persist-header">
          <th>1. th</th>
          <th>2. th</th>
          <th>3. th</th>
          <th>4. th</th>
        </tr>
      </thead>
      <tbody class="maintable">         
  <span class="genTable" id="<?php echo $partnerId ?>">
  </thead>
      <tbody class="maintable">         
      <span class="genTable" id="<?php echo $partnerId ?>">';
     <?php echo  $partner->genTable();?>
     </span>
     </tbody>
    </table>
    </div>
  </div>

我直接在我的partner.php文件中有这个。

现在,我想创建一个 AJAX 函数,当您访问 partner 时加载此表.php以便每次用户对表进行更改时我都可以调用该函数。

所以我创建了这个javascript函数:

function  genTable(){
  $.ajax({ type: "POST",
            url: "resources/dialogs/genTable.php",
            data: {'partnerId': '1'},
        success: function(msg){
           $("div#gentable").html(msg);
        }});
}

因此,这会对我创建的新文件发出POST请求,该文件返回与上面完全相同的表。

但是现在我的其他JavaScript不再在桌子上工作了。例如,我正在运行另一个脚本,以使表标题在滚动时持久化:

function UpdateTableHeaders() {
   $(".persist-area").each(function() {
       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)
       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });      
       };
   });
}
    // DOM Ready      
    $(function() {
       var clonedHeaderRow;
       $(".persist-area").each(function() {
           clonedHeaderRow = $(".persist-header", this);
           clonedHeaderRow
             .before(clonedHeaderRow.clone())
             .css("width", clonedHeaderRow.width())
             .addClass("floatingHeader");
       });

       $(window)
        .scroll(UpdateTableHeaders)
        .trigger("scroll");
    });

上面的代码只是一个示例。所有其他与表交互的 javascript 也不起作用 - 有没有办法让我这样做?

我认为这与东西的加载方式有关?我应该使用 livequery 还是如何使我的其他脚本处理AJAX生成的内容?

如前所述,如果我直接从文件加载表partner.php则所有脚本都可以正常工作,但是当尝试使用AJAX加载表时,它会中断。

任何帮助将不胜感激。

这实际上比你想象的要简单。

您需要做的就是将侦听器放在一个函数中,并在每次 ajax 加载完成时重新调用该函数。