单击表列时未调用单击函数答案

【问题标题】：Click function not called when table column is clicked单击表列时未调用单击函数
【发布时间】：2016-05-31 10:30:27
【问题描述】：

我不明白为什么我的 JavaScript 中的点击功能不起作用。我正在根据 JSON 文件中的值创建一个表，并将类分配给表列。

这是从 JavaScript 添加后的 HTML 结构：

$(function(){
  //Code that adds table goes here

  $('#plane td.availableSeat').click(function() {
    console.log('Clicked');
    $(this).className = 'selectedSeat';
  });
});

即使我（认为）选择器是正确的，但似乎从未调用过 click 函数？

大家有什么建议吗？

【问题讨论】：

你所有的jquery都在$(document).ready() {}里面吗？

标签： javascript jquery html onclick jquery-selectors

【解决方案1】：

正如您在此处看到的，您的代码有效。 https://jsfiddle.net/pnz4re7w/

只需确保在您从所述 JSON 填充表格之后调用您的 $('#plane td.availableSeat').click。

现在看起来您是在加载时分配点击事件，然后填充表格。

【讨论】：

点击码肯定在$(function()内创建表格的代码之后。该表是在我有评论的地方创建的......

【解决方案2】：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        table tr td {
            border:dotted 2px red;
        }
        .selectedSeat {
        color:blue;
        }
    </style>
<script>



    $(document).ready(function () {
        var szTr='<tr>';
        szTr=szTr+'<td class="availableSeat">availableSeat</td>';
        szTr=szTr+'<td class="unavailableSeat">unavailableSeat</td>';
        szTr=szTr+'<td class="availableSeat">availableSeat</td>';
        szTr=szTr+'<td class="unavailableSeat">unavailableSeat</td>';
        szTr=szTr+'<td class="spacer">spacer</td>';
        szTr=szTr+'<td class="availableSeat">availableSeat</td>';
        szTr = szTr + '</tr>';
        $('table').append(szTr)

    $('#plane').find('td.availableSeat').click(function () {
        alert('Clicked');
        $(this).addClass('selectedSeat');
    });
});
</script>
</head>

<body style="width:50%;">
  <div id="plane">
    <table>
        <tr>
            <td class="availableSeat">availableSeat</td>
            <td class="unavailableSeat">unavailableSeat</td>
            <td class="availableSeat">availableSeat</td>
            <td class="unavailableSeat">unavailableSeat</td>
            <td class="spacer">spacer</td>
            <td class="availableSeat">availableSeat</td>
        </tr>

        </table>
      </div>
</body>
</html>

【讨论】：

【解决方案3】：

您的代码不适用于动态添加的元素。在这种情况下，您必须使用 jQuery's delegate 函数，该函数将事件附加到元素的某个父元素，因此允许为动态添加的子元素触发事件。您的点击事件处理程序代码需要如下所示：

$("#plane").delegate("td.availableSeat", "click", function() {
    alert('Clicked');
    $(this).className = 'selectedSeat';
});

【讨论】：

【解决方案4】：

先删除当前类，再添加新类 $(this).removeClass('availableSeat'); $(this).addClass('selectedSeat');

【讨论】：

【解决方案5】：

不幸的是，我无法得到任何可行的建议，但我设法找到了解决方案。

我在每个td元素的创建中添加了cell.onclick = updateSeatStatus;，并创建了这个函数：

function updateSeatStatus() {
   this.className="selectedSeat";
}

完全按照预期工作。

【讨论】：