Question

我计算机上文件中的代码

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script>
    $("#word").blur(function() {
alert('test');
$("#fo").innerHtml("focusout fired");}
);
</script>
</head>

<body>
<div id='word' contenteditable="true" title="Character Name"></div>
<div id='foo'>Foo</div>
</body>

Jfiddle

此代码（部分）在jfiddle中工作，它将触发事件但不会更改foo div的内容。所以问题是：

为什么不改变小提琴中div的内容。
为什么本地计算机上的代码不起作用？

Answer 1

您需要在$(function(){})中附上您的jquery代码，以便在本地工作。另外，将#fo更改为#foo

<script>
$(function(){
    $("#word").blur(function () {
        $("#foo").html("focusout fired");
    });
});
</script>

选中此fiddle

另请注意，我已将innerHtml()更改为html()

Answer 2

默认情况下，JSFiddle将您的JS代码包装在onload处理程序中 - 请参阅页面左侧第二个下拉列表“框架和扩展” - 这意味着您的代码直到整页（所有元素）都已加载并解析。

在您的页面上，您还没有这样做，因为您的脚本块位于顶部，它在解析页面的其余部分并且浏览器还不知道"#word"元素之前运行。< / p>

这就是为什么你的小提琴有效，但你当地的项目没有。

您可以通过将脚本块移动到正文末尾或将代码包装在文档就绪处理程序中来解决此问题，以便在解析完其余页面后运行它。

$(document).ready(function() {
    $("#word").blur(function () {
        alert('test');
        $("#foo").html("focusout fired");
    });
});

对于大多数用途，jQuery的文档准备好比onload处理程序更好，因为它将在解析页面时立即触发，但不等待加载img或iframe元素。

任何好的jQuery教程都会解释the $(document).ready() handler的使用。

Jquery事件不会在本地文件中触发，但会在小提琴中触发

2 个答案: