刷新父窗口中的 jquery .click 侦听器以处理新元素

Refresh jquery .click listeners in parental window to work with new elements

本文关键字：新元素 处理 元素 侦听器 窗口 click jquery 刷新      更新时间：2023-09-26

我有一个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（） 函数绑定到它们。

感谢您的任何帮助。

使用 .on（）

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

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

或

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

你可以使用.on()像

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

使用.on()

只需替换：

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

跟：

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

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

希望有帮助。

您应该使用以下方法：

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

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

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

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

你可能想看看jquery live函数

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

相关文章：