Question

嗨，有人可以解释为什么下面的编码不起作用，但它在这里工作，但它在这里工作http://jsfiddle.net/CDp8t/7/

    <html>
    <head>
        <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

<script type="text/javascript">
    $("#example").focus(function() {
        var first = $(this).find("option").eq(0);
        if(first.val() === "1") {
            first.remove();
        }
    });
</script>
    </head>

    <body>

    <select id="example">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select> 
    </body>
    </html>

Answer 1

我认为你只需要在加载DOM时添加你的事件处理程序：

$(document).ready(function() {
  $("#example").focus(function() {
    var first = $(this).find("option").eq(0);
    if(first.val() === "1") {
      first.remove();
    }
  });
});

当您尝试将事件附加到该元素时，<select>元素不存在。

Answer 2

您正试图在创建#example元素之前访问它

您可以将脚本标记移动到HTML的底部，或者将jquery代码放在$（document）.ready（）函数中

Answer 3

我想说最可能的原因是当JavaScript运行时，你的页面上没有加载DOM，而是在jsfiddle的沙箱中运行时。尝试包装它以等待DOM加载：

$(document).ready(function() {
  $("#example").focus(function() {
    var first = $(this).find("option").eq(0);
    if(first.val() === "1") {
        first.remove();
    }
  });
});

jquery / jscript没有加载

3 个答案: