jquery - 将 jQuery Tablesorter 与原型(prototype)结合使用

Question

我在使用 Prototype.js 的旧应用程序上添加 jQuery 表排序器功能时遇到问题。我会使用 TableKit，但我想要排序的表是在 AJAX 回调中动态构建和清除的，这是 TableKit 无法处理的。工作正常，除非我尝试触发表排序器缓存的更新:

// Clear the list view
$$('#scrollingList tr.dataRow').each(function(e) { 
    e.remove();
});

addMapMarkers(); // This function rebuild the sortable table

// triggering update to clear tablesorter cache
jQuery('#soundTable').trigger('update');

当“update”回调抛出错误时 table.tBodies[0] 未定义。

我建立了一个简化的测试用例，如果我不包含prototype.js 库，它工作得很好，所以我很确定这是 jQuery 和 Prototype 之间的兼容性。我真的不想仅仅为了使用 tablesorter 而在 jQuery 中重写整个内容，所以任何帮助都会受到欢迎。谢谢。

这是简单示例的代码...

<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

    jQuery(document).ready(function() {
    jQuery("table").tablesorter(); 
    jQuery("#append").click(function() {

    // add some html
    var html = "<tr id='deltest' class='data'><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>";
    html += "<tr class='data'><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>";
    html += "<tr class='data'><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>";        
    html += "<tr class='data'><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>";

    var sorting = [[2,1],[0,0]];

   // append new html to table body 
    jQuery("table tbody").append(html);

    jQuery('tr').click(function(){  
    jQuery(this).remove();
    jQuery('table').trigger('update');
    jQuery("table").trigger("sorton",[sorting]) 

   }) 
  return false;
    });
});
</script>

我有一个动态构建的表，已将单击处理程序附加到第一行。建表后单击第一行将删除该行并触发更新。正如我所说，没有prototype.js 也能正常工作，如果包含prototype.js，则会出现相同的错误，我认为这表明 jQuery/Prototype 冲突。

Answer 1

这确实是一个非常有趣的问题。我找到了答案:这是因为 Prototype 在 DOM 元素中添加了一个名为 update 的函数，该函数希望更新其内容。

我是如何到达那里的，然后是该怎么做:

我是如何到达那里的

首先，我创建了您的代码的实时副本:

• Without Prototype | source
• With Prototype | source

我不是 100% 确定 tablesorter 插件部分是否有效，而且我也没有得到与您相同的错误，但是如果没有 Prototype，一行会按照您的预期被删除，而使用 Prototype整个 table 体消失。由于整个表体消失可能会导致像 table.tbodies[0] is undefined 这样的错误，我认为这已经足够好了。

所以我想:我将从等式中删除表格排序器。首先，我仅删除了 script 标记及其调用，但保留了 jQuery('table').trigger(...) 调用。包含 Prototype 的完整表格仍然消失，因此它不是表格排序器代码本身。因此，我对这些trigger 调用进行了评论，它开始工作(只是单击的行被删除)。

我查看了触发器调用并想:我打赌这是 jQuery('table').trigger('update') 调用。果然，罪魁祸首就是它。注释掉就万事大吉了；把它留在里面，你的 table 体就会消失。

那为什么会这样呢？让我们考虑一下 trigger 的作用:它创建一个合成事件，然后通过其自己的事件处理程序触发该事件，然后通过调用该事件在 DOM 元素上“触发”该事件(如果存在)。例如，如果您触发“click”事件，最终它将调用“domelement.click(event)”来调用元素上的任何旧式 DOM0 处理程序。类似地，如果您触发“update”事件，最终它会调用“domelement.update(event)”(如果 DOM 元素有这样的功能)。

这就是 Prototype 的用武之地:Prototype 向所有 DOM 元素添加一个名为 update 的函数。该函数类似于 jQuery 的 html 函数:它接受元素的新内容，删除旧内容，然后添加新内容。该函数在桌面上被调用，从而清除了tbody。因此 jQuery 最终在元素上调用 Prototype 的 update，清除表格的内容。

我们可以在不使用 Prototype 的情况下证明这种情况的发生，如下所示:

jQuery(function($) {

  var p = document.createElement('p');
  p.innerHTML = "Hi there";
  p.update = function() {
    display("<code>update</code> called on paragraph");
  };

  document.body.appendChild(p);

  $("#theButton").click(function() {
    $("p").trigger("update");
  });

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
});

Live copy | source

果然，如果我们单击该按钮，我们会看到在该段落上调用 update 的消息。

该怎么办

不要调用jQuery('table').trigger('update')。我在 the tablesorter docs 中没有看到任何内容这表明您应该触发一个名为“更新”的事件，因此您可能不需要这样做(尽管文档似乎对细节有点了解)。如果您确实需要这样做，为了使 tablesorter 插件与 Prototype 兼容，您可能必须编辑插件的源代码，以对该事件使用除“update”之外的其他单词(例如“tableupdate”)。