Question

我无法弄清楚为什么JavaScript中的点击功能不起作用。我正在基于JSON文件中的值创建一个表，我正在为表列分配类。

以下是从JavaScript添加HTML后的结构：

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

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

即使我（认为）选择器是正确的，也似乎永远不会调用click函数？

有人有任何建议吗？

Answer 1

正如您在此处看到的，您的代码可以运行。 https://jsfiddle.net/pnz4re7w/

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

现在，您似乎在加载时分配了click事件，然后填充了表格。

Answer 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>

Answer 3

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

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

Answer 4

首先删除当前类，然后添加新类 $（本）.removeClass（ 'availableSeat'）; $（本）.addClass（ 'selectedSeat'）;

Answer 5

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

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

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

完全符合预期。

单击表列时单击未调用的函数

5 个答案: