JQuery声明问题

最近，使用事件停止工作的我的jQuery代码。我不明白为什么。我有声明问题吗？

这是我在标题中的声明：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content=XXXXXXX">
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/Bootstrap-table.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    <link href="/Content/justified-nav.css" rel="stylesheet"/>
    <link href="/Content/simple-sidebar.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/Content/msdropdown/dd.css" />
    <link href="/Content/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="/Content/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="/Scripts/jquery-3.1.1.js"></script>
    <script src="/Scripts/jquery-3.1.1.min.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/Bootstrap-table.js"></script>
    <script src="/Scripts/ManageSeason.js"></script>
    <script src="/Scripts/site.js"></script>
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <script src="/Scripts/sidebar_menu.js"></script>
    <script src="/Scripts/js/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
    <title>XXXXXX</title>
</head>

和我的jQuery代码：

 $('select[class*="selectEqRaceId"]').change(function () {
     // do some stuff
 });

和

$('#menu li a').click(
    function () {
        // Do some stuff
    }
);

它不起作用。我单击按钮或更改选择选项的值。浏览器编译器不进入此事件功能。

仅一次导入jQuery，使用$（document）.ready（）函数，然后查看下面的示例。

$(document).ready(function() {
  $('select[class*="selectEqRaceId"]').change(function() {
    console.log("Changed via slect menu");
  });
  $('button').click(function() {
    console.log("Clicked via button");
  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<select class="selectEqRaceId">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br>
<button>
  Click me
</button>

编辑：
您必须在事件设置或使用$（document）.ready（）函数之前放置标签，该功能将执行页面完成加载后其中的代码。使用$（document）.ready（）函数总是一个好主意。

我添加了一个示例：
1）脚本在没有$（文档）的标签之后。dready（）
2）在没有$（文档）的标签之前脚本。3）脚本在带有$（document）.ready（）function的标签之前

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<h3>Script after the tags without $(document).ready()</h3>
<select class="afterTheTagsWithReady">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br>
<button class="afterTheTagsWithReady">Click me</button>
<script>
  // Without the $(document).ready() function and after the tags 
  $('select.afterTheTagsWithReady').change(function() {
    console.log("Changed via slect menu afterTheTagsWithReady");
  });
  $('button.afterTheTagsWithReady').click(function() {
    console.log("Clicked via button afterTheTagsWithReady");
  });
</script>
<h3>Script before the tags without $(document).ready() (this wont work)</h3>
<script>
  // Without the $(document).ready() function and after the tags 
  $('select.beforeTheTags').change(function() {
    console.log("Changed via slect menu beforeTheTags");
  });
  $('button.beforeTheTags').click(function() {
    console.log("Clicked via button beforeTheTags");
  });
</script>
<select class="beforeTheTags">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br>
<button class="beforeTheTags">Click me</button>
<h3>Script before the tags WITH $(document).ready() function</h3>
<script>
  // With the $(document).ready() function and before the tags 
  $(document).ready(function() {
    $('select.beforeTheTagsWithReady').change(function() {
      console.log("Changed via slect menu beforeTheTagsWithReady");
    });
    $('button.beforeTheTagsWithReady').click(function() {
      console.log("Clicked via button beforeTheTagsWithReady");
    });
  });
</script>
<select class="beforeTheTagsWithReady">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br>
<button class="beforeTheTagsWithReady">Click me</button>

简而言之，是的。由于您将所有脚本加载到Head元素中，因此脚本执行正确。它将事件处理程序附加到脚本加载时发现的所有元素（这不是因为身体的DOM树尚未构造）。

您必须等待将元素加载到DOM树中，然后才能操纵它们，以便您可以通过在关闭车身标签结束之前加载JS代码来解决此问题（即，在另一个接头，元素），或者您可以使用jQuery助手$().ready(function)，以便在尝试将事件处理程序附加到元素之前等待DOM树完全加载。

$().ready(function(){
    $('#menu li a').click(function () {
        //Do some stuff
    });
});

相关内容

最新更新

热门标签：