Jquery事件不会在本地文件中触发，但会在fiddle中触发_Jquery

Jquery事件不会在本地文件中触发，但会在fiddle中触发

jquery

Jquery事件不会在本地文件中触发，但会在fiddle中触发,jquery,Jquery,我计算机上的文件中的代码 <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").i

我计算机上的文件中的代码

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


$（“#word”）.blur（函数（）{
警报（“测试”）；
$（“#fo”）.innerHtml（“focusout激发”）；}
);
福

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

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

您需要将jquery代码封装在

$（function（）{}）

中，以便它在本地计算机上运行。另外，将

#fo

更改为

#foo

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


$（函数（）{
$（“#单词”）.blur（函数（）{
$（“#foo”）.html（“focusout-fired”）；
});
});

检查这个

另外，请注意，我将

innerHtml（）

更改为

html（）

您需要将jquery代码封装在

$（function（）{}）

中，它才能在本地应用程序上运行。另外，将

#fo

更改为

#foo

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


$（函数（）{
$（“#单词”）.blur（函数（）{
$（“#foo”）.html（“focusout-fired”）；
});
});

检查这个

另外，请注意，我将

innerHtml（）

更改为

html（）

，默认情况下，JSFIDLE将JS代码包装在

onload

处理程序中-请参阅页面左侧“Frameworks&extensions”下的第二个下拉列表-这意味着您的代码在整个页面（所有元素）之后才会执行已加载并解析

在您的页面上，您还没有这样做，因此，由于您的脚本块位于顶部，它会在解析页面其余部分之前运行，而浏览器还不知道

“#word”

元素

这就是为什么你的小提琴管用，而你当地的项目却不管用

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

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

在大多数情况下，jQuery的DocumentReady比onload处理程序要好，因为它将在解析页面时立即触发，而无需等待img或iframe元素加载

任何好的jQuery教程都会解释如何使用。

默认情况下，JSFIDLE将您的JS代码包装在

onload

处理程序中-请参阅页面左侧“Frameworks&extensions”下的第二个下拉列表-这意味着您的代码在整个页面（所有元素）加载并解析之后才会执行

在您的页面上，您还没有这样做，因此，由于您的脚本块位于顶部，它会在解析页面其余部分之前运行，而浏览器还不知道

“#word”

元素

这就是为什么你的小提琴管用，而你当地的项目却不管用

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

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

在大多数情况下，jQuery的DocumentReady比onload处理程序要好，因为它将在解析页面时立即触发，而无需等待img或iframe元素加载

任何好的jQuery教程都会解释如何使用。

Oops，foo的特性在第二次查看时非常明显。另一个答案提到将其置于onLoad，那么$（document）.ready（function（）{和$（function（）之间的区别是什么{？@SpectralEdge-后者只是前者的一个快捷方式。@SpectralEdge是一个快捷方式。谢谢。下次会记得检查文档加载。只是在做了一段时间的c#之后才开始编写js。不习惯寻找什么。这是一个很常见的困惑。有时查看chrome控制台以查看是否有错误是很有用的Oops，foo的东西在第二次查看时是很明显的。另一个答案提到将其加载，那么$（document）.ready（function（）{和$（function（）之间的区别是什么{？@SpectralEdge-后者只是前者的一个快捷方式。@SpectralEdge是一个快捷方式。谢谢。下次会记得检查文档加载。只是在做了一段时间的c#之后才开始编写js。不习惯寻找什么。这是一个很常见的困惑。有时查看chrome控制台以查看是否有错误是很有用的怎么了。