javascript - JQuery 选择器错误 - 不起作用

Question

我有一个奇怪的 JQuery bug，我找不到原因。

每行都有一个编辑按钮，可将标题和正文单元格更改为输入和文本区域字段。

它适用于第一行，但不适用于任何其他行

如果我单击第一行，它将适用于连续行。

有人可以看一下我的代码

@extends('layouts')

@section('content')
  <div class="container">
  <h1>Diary Application</h1>
  <button style="margin-bottom: 10px;" class="btn btn-primary"><a href={{ url('newEntry') }}>New Entry<span class="glyphicon glyphicon-plus"></span></a></button>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Date</th>
        <th>Title</th>
        <th>Content</th>
      </tr>
    </thead>
    <tbody>
      @foreach($entries as $entry)
      <tr id={{ $entry->id }}>
        <td>{{ $entry->created_at->format('l h:ia d/m/Y') }}</td>
        <td id="title">{{ $entry->title }}</td>
        <td id="body">{{ $entry->body }}</td>
        <td id="buttons"><button class="btn btn-danger"><a href={{ url("/deleteEntry/$entry->id")}}>Delete</a></button> &nbsp; <button class="btn btn-warning" id="edit" data-id={{ $entry->id }}>Edit</button></td>
      </tr>
      @endforeach
    </tbody>
  </table>
  </div>
  @endsection

 @section('scripts')
  <script>
    $(document).ready(function() {
      $("button#edit").click( function() {
        var id = $(this).data("id");
        var titleField = $("tr#" + id + " > td#title");
        var contentField = $("tr#" + id + " > td#body");
        alert("tr#" + id + " > td#body");
        alert($("tr#" + id + " > td#body").html());
        titleField.replaceWith("<td style='vertical-align: center;'><input type=text name='title' value=" + titleField.html() + "></td>");
        contentField.replaceWith("<td style='vertical-align: center;'><textarea rows='3' name='body'> " + contentField.html() + "</textarea></td>");
        $("tr#" + id + " > td#buttons").append("&nbsp; <button class='btn btn-success'>Save</button>");
        $("tr#" + id + " > td#buttons > .btn-warning").attr('disabled', 'disabled');
      });
    });
  </script>
  @endsection

Answer 1

将 id 更改为 class 并尝试以下代码，

$(document).ready(function() {
    $("button.edit").click( function() {
        var tr = $(this).closest("tr");
        var titleField = tr.find(".title");
        var contentField = tr.find(".body");
        alert(contentField);
        alert(contentField.html());
        titleField.replaceWith("<td style='vertical-align: center;'><input type=text name='title' value=" + titleField.html() + "></td>");
        contentField.replaceWith("<td style='vertical-align: center;'><textarea rows='3' name='body'> " + contentField.html() + "</textarea></td>");
        tr.find(".buttons").append("&nbsp; <button class='btn btn-success'>Save</button>")
           .find(".btn-warning") // use chaining
           .prop('disabled', true);// use prop instead of attr
    });
});

您的 HTML 应该是，

<tr id={{ $entry->id }}>
    <td>{{ $entry->created_at->format('l h:ia d/m/Y') }}</td>
    <td class="title">{{ $entry->title }}</td>
    <td class="body">{{ $entry->body }}</td>
    <td class="buttons"><button class="btn btn-danger"><a href={{ url("/deleteEntry/$entry->id")}}>Delete</a></button> &nbsp; <button class="btn btn-warning edit" data-id={{ $entry->id }}>Edit</button></td>
</tr>

片段，

$(document).ready(function() {
  $("button.edit").click(function() {
    var tr = $(this).closest("tr");
    var titleField = tr.find(".title");
    var contentField = tr.find(".body");
    titleField.replaceWith("<td style='vertical-align: center;'><input type=text name='title' value=" + titleField.html() + "></td>");
    contentField.replaceWith("<td style='vertical-align: center;'><textarea rows='3' name='body'> " + contentField.html() + "</textarea></td>");
    tr.find(".buttons").append("&nbsp; <button class='btn btn-success'>Save</button>")
      .find(".btn-warning") // use chaining
      .prop('disabled', true); // use prop instead of attr
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr id="1">
    <td>Date 1</td>
    <td class="title">Title1</td>
    <td class="body">Body1</td>
    <td class="buttons"><button class="btn btn-danger"><a href="#">Delete</a></button> &nbsp; <button class="btn btn-warning edit" data-id="1">Edit</button></td>
  </tr>
  <tr id="2">
    <td>Date 2</td>
    <td class="title">Title2</td>
    <td class="body">Body2</td>
    <td class="buttons"><button class="btn btn-danger"><a href="#">Delete</a></button> &nbsp; <button class="btn btn-warning edit" data-id="2">Edit</button></td>
  </tr>
  <tr id="3">
    <td>Date 3</td>
    <td class="title">Title3</td>
    <td class="body">Body3</td>
    <td class="buttons"><button class="btn btn-danger"><a href="#">Delete</a></button> &nbsp; <button class="btn btn-warning edit" data-id="3">Edit</button></td>
  </tr>
</table>