x-editable table 元素没有事件侦听器

Question

我有一个动态 table，其中一列设置为包含 editable 元素。呈现页面后，我可以编辑第一行中的条目，但此后其他行的 none 具有 id: name 的事件侦听器。我不明白为什么。这是我的代码：

$(document).ready(function(){
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';     

    //make name editable
    $('#name').editable();
    ... });

      <tbody>
        <?php foreach ($action_lists as $list_item) {
          echo "<tr>";
              echo "<td> <a href=\"#\" id=\"name\" data-pk=\"{$list_item["ActionList"]["list_index"]}\" data-url=\"/post\" data-type=\"text\" data-placement=\"right\" data-title=\"Enter new name.\" class=\"editable editable-click\">{$list_item["ActionList"]["name"]}</a></td>";
          echo "</tr>";
        }?>
      </tbody>

Answer 1

我认为您需要使用 class 名称来调用它，而不是从 ID 调用它，可以将相同的 class 应用于每个 column/row 并单击每个 column/row 将触发点击事件。之后使用“$(this)”会对你有所帮助。

Answer 2

$('#name') 将根据 id 查询文档，因此它将 return 第一个匹配的元素，因此只需使用 class name 而不是 id 并使用 $(".name "), 那么它将应用于所有元素

Answer 3

尝试使用 class 而不是 id

$(document).ready(function(){
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';     

    //make name editable
    $('.name').editable();
    ... });

      <tbody>
        <?php foreach ($action_lists as $list_item) {
          echo "<tr>";
              echo "<td> <a href=\"#\" class=\"name\" data-pk=\"{$list_item["ActionList"]["list_index"]}\">
data-url=\"/post\" data-type=\"text\" data-placement=\"right\"
data-title=\"Enter new name.\" class=\"editable
editable-click\">{$list_item["ActionList"]["name"]}</a></td>";
          echo "</tr>";
        }?>
      </tbody>

这应该可以正常工作

x-editable table 元素没有事件侦听器

No event listener for x-editable table elements

javascript

jquery

cakephp

x-editable

jquery-events