Question

正如标题所示，单击selection-table中的任何表行都不会执行任何操作。第一个警报 - alert("It works on each visit!"); - 确实在每个页面加载时运行。我试过.click和on('click',function)无济于事。我想不出为什么除了在遍历我看不到的表行时犯了一个愚蠢/简单的错误之外，这不会起作用的原因。

$( document ).on('turbolinks:load', function() {
    alert("It works on each visit!");
    $('#selection-table tbody tr:not(:first-child)').each(function () {
        $(this).click(function() {
            alert("row clicked");
            var ID = $(this).first().html();
            $('#tokemon_trainer_id').val(ID);
        });
    });
});

<table id="selection-table" class="w3-table w3-striped w3-bordered w3-border w3-hoverable" >
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <% @list_of_trainers.each do |trainer| %>
      <tr class="selection-row">
        <td><%= trainer.id %></td>
        <td><%= trainer.name %></td>
      </tr>
      <% end %>
    </table>

Answer 1

来自turbolinks文档：

如果可能，请避免使用turbolinks：load event来添加事件监听器直接指向页面主体上的元素。相反，考虑一下使用事件委托在文档或文件上注册一次事件监听器窗口。

他们提出此建议是因为他们不保证在文档加载完成之前turbolinks:load没有发生（即您的行可能实际上不存在 - 因此不会附加任何内容）。下面的代码使用事件委托。

$(document).on('click', '#selection-table tbody tr:not(:first-child)', function () {
    alert("row clicked");
    var ID = $(this).first().html();
    $('#tokemon_trainer_id').val(ID);
});

$(document).on('click', '#selection-table tbody tr:not(:first-child)', function () {
    console.log("row clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div id='result'></div>
<table id="selection-table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr class="selection-row">
    <td><%= trainer.id %></td>
    <td><%= trainer.name %></td>
  </tr>
</table>
</body>

无法单击Rails生成的表行

1 个答案: