0

我有一个 HTML 表格，它在单击表格单元格时打开一个弹出窗口，并在该表格中添加新的表格行。我也想将 .click() 监听器添加到这些行。这是我的 HTML 表格

<table id="myTable" style="width: 100%;">
<tr><th></th><th>Kompetence</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>

<tr style=><td rowspan="2">My text</td>
<td>Some text</td><td class="hodnoceni 1">&nbsp;</td><td class="hodnoceni 2">&nbsp;</td><td class="hodnoceni 3">&nbsp;</td><td class="hodnoceni 4">&nbsp;</td><td class="hodnoceni 5">&nbsp;</td><td class="hodnoceni 6">&nbsp;</td></tr>
<tr><td>Another text</td><td class="hodnoceni 1" title="sum titl">&nbsp;</td><td class="hodnoceni 2">&nbsp;</td><td class="hodnoceni 3">&nbsp;</td><td class="hodnoceni 4">&nbsp;</td><td class="hodnoceni 5">&nbsp;</td><td class="hodnoceni 6">&nbsp;</td></tr>
<tr class="newPartOfTable"><td rowspan="50">This is new part of table</td><td id="testId" class="testClass">&nbsp;</td><td class="hodnoceni 1">&nbsp;</td><td class="hodnoceni 2">&nbsp;</td><td class="hodnoceni 3">&nbsp;</td><td class="hodnoceni 4">&nbsp;</td><td class="hodnoceni 5">&nbsp;</td><td class="hodnoceni 6">&nbsp;</td></tr>
</table>

这是我的 javascript

var possibleInputs = ["T", "A", "Ž", " "];

var curValue;
$("#myTable .hodnoceni").click(function() {
    var level;
    var index = 0;
    var rowIndex = $(this).parent().index();
    curValue = $(this).text();
    if(curValue == "T"){
        index = 1;
    }else if(curValue == "A"){
        index = 2;
    }else if(curValue == "Ž"){
        index = 3;
    }else{
        index = 0;
    }
    console.log("row index");
    console.log("total rows"+$("#kompetence tr").length);
    console.log("td clicked");
    var num = $(this).attr("class").match(/\d+/);
    $(this).text(possibleInputs[index]);
    console.log("Hodnoceni: "+num);
});
$(".newPartOfTable").click(function(){
    var rows = $("#kompetence tr").length;
    window.open("newPage.html?rows="+rows, "New popup", "width=600,height=300");
});

这是向表中添加新行的javascript（它在弹出窗口中）

var table = window.opener.document.getElementById("myTable");
console.log(table);
var row = tabulka.insertRow(<%=paramTableRows %>);
for(var i = 0; i < 7; i++){
    var cell = row.insertCell(i);
    cell.innerHTML = "<%= paramTableRows %>";
    cell.className = "hodnoceni";
}

我想要做的是在向表中添加新行之后，我希望它们将现有的 .click() 函数绑定到它们。

谢谢你的帮助。

4

6 回答 6

2

使用.on()

由于 javascript 添加的新元素在 DOM 就绪或页面加载时不是 DOM 的一部分，因此您必须使用事件委托

$(document).on("click", "#myTable .hodnoceni", function() {

或者

$("#myTable").on("click", ".hodnoceni", function() {
于 2013-10-24T05:34:07.483 回答
2

你可以使用.on()喜欢

$("#myTable .hodnoceni").on('click', function() {
});
于 2013-10-24T05:34:32.777 回答
1

采用.on()

只需更换：

$("#myTable .hodnoceni").click(function() {

和：

$(document).on('click', '#myTable .hodnoceni', function() {

这也将为未来的动态 dom 元素绑定 click 事件，而不仅仅是那些加载了初始 dom 加载的元素。

希望有帮助。

于 2013-10-24T05:33:50.033 回答
1

您应该使用以下内容：

$('#myTable').on('click', '.hodnoceni', function(event) {
    event.preventDefault();
    ...  
});

这会将您的事件附加到#myTable元素中的任何单元格，从而减少必须检查整个文档元素树的范围并提高效率。

于 2013-10-24T05:37:30.480 回答
0

jQuery live 在某些版本上已被弃用。所以最好使用'on'。 http://api.jquery.com/on/

它适用于 DOM 中的所有新旧元素。

于 2013-10-24T05:35:49.577 回答
-2

您可能想查看 jquery live 功能

http://api.jquery.com/live/

于 2013-10-24T05:32:37.333 回答