Javascript 当我将JS函数从JSFIDLE中取出时，为什么JS函数不工作？_Javascript_Jquery_Html_Css

Javascript 当我将JS函数从JSFIDLE中取出时，为什么JS函数不工作？

javascript jquery html css

Javascript 当我将JS函数从JSFIDLE中取出时，为什么JS函数不工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,以前也有人问过类似的问题，但他们中的大多数人都建议我使用以下方法： $(document).ready(function() { // put your Javascript here }); 即使使用它，它仍然不起作用：代码为JSFIDLE: HTML: <html> <head> </head> <body> <div class="row"> <div class="col-xs-

以前也有人问过类似的问题，但他们中的大多数人都建议我使用以下方法：

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

即使使用它，它仍然不起作用：

代码为JSFIDLE:

HTML:

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

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

  <script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

结果是：

html的所有组件都会显示，而且似乎没有JS功能存在

您需要

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>

并确保在JavaScript之前插入此。
添加：

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

因为您需要引导脚本、引导strp css和jquery脚本

我对它进行了测试，它可以工作。
您需要在您的jquery之前添加jquery。这两个jquery链接中的任何一个都可以，但当然不是两个都可以，那太傻了。：）你的引导js参考在哪里？你有没有包括你的引导脚本？它不在您展示的代码中。另外，您不应该加载两个版本的jQuery。我不会同时添加两个版本的jQuery。我认为这与引导有关，因为我没有引用它，而且它不在JSFIDLE HTMLUN中，幸运的是它仍然不起作用。我完全按照你说的做了。什么不起作用？你有错误吗？问题是什么？不起作用是非常普遍的行为与以前完全一样。没有可见错误，html将在一个页面上加载表和modal.all。似乎没有JS功能您是否也包含了
BootstrapJS
？正确，但JQuery版本必须是：code.JQuery.com/JQuery-3.2.1.slim.min.JS“>请更新，以便我将其标记为正确。是，回答已更新。