0

在网页中使用 jQuery 1.9.1 并进行 AJAX 调用以返回 XML 数据集。数据被加载到 HTML 表中的行中。前 2 列包含文本信息，第 3 列可以包含以下三项之一：下拉框、提交按钮或文本。第 4 列包含提交按钮（在有下拉菜单的行上）或为空白。

HTML表格如下：

<table id="ztable" border="1" cellpadding="1" cellspacing="1">
  <thead id="zthead">
  </thead>
  <tbody id="ztbody>
  </tbody>
</table>

数据在逐行循环的函数中加载到表中。

var trow = $("<tr class='rows'>"), tbdy=$("#ztbody");
.....
$(xml).find("Row").each(function(index) {
celldata = "<td class='msgTime'><div class='msgTime " + msgClass + "'>" + msgTime + "</div></td>" + 
....
"<td class='action'><div class='action " + msgClass + "'>"+ actionDD +"</div></td>" +
....
$(celldata).appendTo(trow);
trow.appendTo(tbdy);

当页面第一次加载时，所有的鼠标事件、单击事件和更改事件都会按应有的方式触发。

然而，一旦他们被解雇，我设置了一个强制重新创建 HTML 表的开关。但是，一旦执行完毕，下拉菜单仍然存在并且可以打开，但没有任何内容可供选择。没有按钮响应，没有鼠标事件触发。

我正在调用我第一次用来构建表的相同函数，但使用 a$("ztable tbody).empty()来清除那里的内容并重新创建它。我知道何时重新创建表，无论我在第一个表加载时所做的任何处理都已发生并且这些行不再显示，但重新创建的表 - 具有适当的列、下拉列表、按钮等 - 将允许打开下拉菜单（并且可以选择一个项目），但没有其他任何东西触发 - 没有鼠标事件，什么都没有。

为了将控件绑定到重新创建的页面需要发生什么？还是我做错了什么？

***编辑** *

根据后续行动，我正在编辑并提供有关处理程序的更多信息。所有这些都在$(document).ready：

$(".choices").mousedown(function() { console.log("mousedown"); })
$(".choices").mouseover(function() { console.log("mouseover"); })
$(".choices").mouseout(function() { console.log("mouseout"); })
$(".choices").mouseup(function() { console.log("mouseup"); })

....

$(".rows").each(function() {
    var $d = $(this).find(".choices");
    $d.change(function() {
        if ($d.val() > 0) {
            ..... do stuff where dropdown has been selected
         }
    });
});


$(".sBtn").click(function() {
   ..... do stuff where one type button was clicked
   });

$(".rbtn").click(function() {
    .... do stuff where another type button was clicked
   });

.choices是分配给SELECT下拉菜单的类。 .rows是分配给 中的行的<tbody>类ztable。 .sBtn是分配给按钮的类，该按钮将位于第 4 列并与第 3 列中的下拉框相关联。 .rbtn是分配给将在第三列中的按钮的类。

每个按钮和下拉菜单都有一个唯一的 ID，例如： choice_M_40&sb_M_40将在第 1 行。 choice_M_45&sb_M_45将在第 2 行。rb_X_3000将在第 3 行的第 3 列，等等。

4

1 回答 1

1

如果要使用动态内容，则需要绑定委托处理程序，而不是直接绑定到元素。当您使用.on()单个参数或.click()类似的其他事件时，您只需将事件处理程序绑定到当前存在于 DOM 中的元素。

使用.on()额外的参数来使用委托处理程序，它将在事件冒泡 DOM 时捕获事件，而不是绑定到元素本身。

$(document).on('click','div.action',function(){
    //do your click programming here
})

是最通用的形式，它将一个委托处理程序绑定到文档上，该处理程序将捕获从带有选择器的元素冒泡的点击事件div.action

在您的情况下，它看起来$("#ztbody")很可能是静态的，因此您可以将委托处理程序绑定到该文件而不是文档，以使您的代码更高效。

$("#ztbody").on('click','div.action',function(){
    //do your click programming here
})

对所有不同的事件做同样的事情。另一种方法是在每次添加或更改内容时重新绑定所有事件，但我不建议这样做。

于 2013-09-17T13:32:14.643 回答