【发布时间】:2012-01-26 09:14:21
【问题描述】:
我最近刚刚了解了 jquery 如何访问动态生成的内容,方法是在其父对象(或第一个可用的非动态父对象)周围放置一个“气泡”,然后告诉它如何处理其中的事件等等
我有一个表(静态)并且行是动态添加的。
<table class="aBorder_ClearBlack" width="100%" id="tblEveryone">
<tr class="TableHeading_Dark_Small">
<td>Current User Calls</td>
<td><span id="theRefresh" style="cursor:pointer">
<img ... onclick="javascript:clicky()"...></span>
</td>
</tr>
以及添加行的代码:
function clicky() {
var table = document.getElementById("tblEveryone");
var tmpRowCount = table.rows.length;
//clear existing rows first (else it just appends)
for (var x = 2; x < tmpRowCount; x++) {
table.deleteRow(x);
tmpRowCount--;
x--;
}
jQuery.each(users, function (index, user) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.style.display = "none"; <--------
row.setAttribute('class', 'BeforeHover_Clean');
var cell1 = row.insertCell(0);
cell1.innerHTML = users[index].Name;
var cell2 = row.insertCell(1);
cell2.innerHTML = users[index].Calls;
});
$(".BeforeHover_Clean").show(); <-----
}
然后是我用来“绑定”每行点击事件的代码
$(document).ready(function () {
$('#tblEveryone').delegate(".BeforeHover_Clean", "click", function () {
var whatClicked = this.innerHTML.toLowerCase().split("</td>")[0].split("<td>")[1];
document.getElementById("aIframe").src = "Calls.aspx?aUser=" + whatClicked;
});
});
事情是(上面标有row.style.display,正确地从没有可见性的项目开始,但最后一行,$(".BeforeHover_Clean").show(); 显然不会工作,因为内容是动态的。 有没有办法操纵委托或其他一些 jquery 功能,以便在需要时再次设置项目可见?
我对这个级别一无所知。将“单击”事件绑定到父级就像我得到的一样好!哈哈。我现在感觉像查尔斯巴贝奇! ;)
【问题讨论】:
-
你可能应该给你添加 id 属性的行,这样你可以在以后需要时访问它们。此外,您添加行的方式看起来有点复杂。也许值得研究这个线程:stackoverflow.com/questions/171027/add-table-row-in-jquery
标签: javascript jquery dynamic delegates