Question

最近，我使用事件的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
    }
);

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

Answer 1

简而言之，是的。由于您要在head元素中加载所有脚本，因此脚本正在正确执行。它将事件处理程序附加到它在脚本加载时找到的所有元素（由于尚未构造正文的DOM树，因此没有）。

你必须等待元素加载到DOM树中才能操作它们，这样你就可以通过在结束体标记结束之前加载你的JS代码来解决这个问题（即在另一个体内标记之后）您可以使用JQuery帮助器$().ready(function)，以便在尝试将事件处理程序附加到元素之前等待DOM树完全加载。

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

Answer 2

只需导入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）没有$（文件）.ready（）的标签之后的脚本 2）没有$（文件）.ready（）的标签之前的脚本（这不会起作用）
3）标签之前的脚本WITH $（document）.ready（）函数

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

Jquery声明问题？

2 个答案: