Question

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

// 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”回调抛出错误表时，未定义.tBodies [0]。

我敲了一个简化的测试用例，如果我不包含prototype.js库，它工作正常，所以我很确定这是jQuery和Prototype之间的兼容性问题。我真的不想在jQuery中重写整个东西只是为了使用tablesorter，所以任何帮助都会很受欢迎。感谢。

以下是简单示例的代码......

<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工作正常，如果包含我认为指向jQuery / Prototype冲突，会得到相同的错误。

Answer 1

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

我是如何到达那里的，然后是如何处理它：

我是如何到达那里的

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

Without Prototype | source
With Prototype | source

我不是百分之百确定其中的tablesorter插件部分是否正常工作，而且我没有完全得到同样的错误，但是如果没有Prototype，则会按照您的预期删除一行，并使用Prototype整个桌子的身体消失了。由于整个表体消失可能会导致table.tbodies[0] is undefined之类的错误，我认为这已经足够了。

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

我看了一下触发器电话并想：我打赌它是jQuery('table').trigger('update')电话。当然，那是罪魁祸首。评论一下，一切顺利;把它放进去，桌面就会消失。

那为什么会这样呢？让我们考虑trigger做什么：它创建一个合成事件，然后通过它自己的事件处理程序触发它，然后通过调用它来激活DOM元素上的事件（如果它存在）。例如，如果你触发'click'事件，如果DOM元素具有这样的功能，它最终会调用'domelement.click（event）to call any old-style DOM0 handlers on the element. Similarly if you trigger an 'update' event, eventually it will call 'domelement.update(event)。

这就是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”）。

使用带有Prototype的jQuery Tablesorter

1 个答案:

我是如何到达那里的

该怎么办