Question

之前已经提出了类似的问题，但是大多数/大多数人都建议我使用它：

let

即使使用它仍然无效：

代码是JSFiddle：http://jsfiddle.net/Guruprasad_Rao/ooexfj26/

HTML：

$(document).ready(function() {
    // put your Javascript here
});

jQuery的：

<html>
  <head>
  </head>
  <body>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Johnn</td>
              <td>Doe</td>
            </tr>
            <tr>
              <td>Sam</td>
              <td>Smith</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">EDIT</h4>
          </div>
          <div class="modal-body">
            <p><input type="text" class="input-sm" id="txtfname"/></p>
            <p><input type="text" class="input-sm" id="txtlname"/></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script src="modal.js" type="text/javascript"></script>
  </body>
</html>

我甚至尝试在最后添加这些仍然没有区别：

$(document).ready(function () {
  $('table tbody tr  td').on('click', function () {
    $("#myModal").modal("show");
    $("#txtfname").val($(this).closest('tr').children()[0].textContent);
    $("#txtlname").val($(this).closest('tr').children()[1].textContent);
  });
});

结果： html的所有组件都显示并且没有JS功能似乎存在

Answer 1

添加：

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

因为你需要bootstrap脚本，bootstrp css和jquery脚本。

我测试了它here，它有效。

Answer 2

您需要 jQuery才能让您的代码正常运行。请尝试使用此CDN，因为它比您尝试使用的版本更新。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

请确保在之前插入。

当我把它从JSFiddle中取出时，为什么JS功能不起作用？

2 个答案: