Question

我有一个奇怪的JQuery错误，我无法找到原因。

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

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

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

有人可以查看我的代码

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

代码段，

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

Answer 2

首先将ID更改为Classes＆amp;

使用jQuery的$(document).ready(function() { $("button#edit").click( function() { var tr = $(this).closest("tr"); // This will give you the TR in which your elements reside. .... your rest of the code with some modifications .... }); });，如下所示

#! /usr/bin/python

Answer 3

您正在使用相同的ID（#edit）生成多个按钮标记，在html文档中，id attibute必须是唯一的，您可以使用这样的类选择器。

<button class="btn btn-warning edit" data-id={{ $entry->id }}>Edit</button>

然后在你的javascript使用中：

$("button.btn.edit").click( function() {...});

JQuery选择器错误 - 无法正常工作

3 个答案: