Question

工具： Visual Studio 2010

我正在尝试学习jQuery，但即使在尝试了2个小时之后我也无法使这个例子工作。我知道这很简单，但我不知道我错过了什么。

JQuery在此处定义，位于<head>标记内：

<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("#divTest1").hide();
            $("p").hide();
        });
    });
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
    <div id="divTest1">
        Itz too much I cant make it work...!
    </div>
    <h2>
        This is a heading</h2>
    <p>
        This is a paragraph.</p>
    <p>
        This is another paragraph.</p>
    <button>
        Click me</button>
</div>
</form>
</body>

更新

我试过这个 $（document）.ready（function（）{alert（“Hello”）;}）; 并在firebug / Script中添加了断点，在页面加载firebug进入jquery库并退出之后，但它没有显示任何弹出窗口
我刚刚从“jquery-1.7.1-vsdoc.js”更改为此“jquery-1.7.1.js”并使用简单脚本检查itz是否正常工作$(document).ready( function(){ alert("Hello"); } );，jquery正在运行现在

Answer 1

正如Matt Grande所指出的，你实际上并没有在你的页面中包含jQuery库。您需要将以下内容添加到head：

<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>

vsdoc版本只是为了添加Intellisense支持。

此外，使用e.preventDefault()优先于返回false;

$(document).ready(function () {
    $("button").click(function (e) {
        e.preventDefault();
        $("#divTest1").hide();
        $("p").hide();
    });
});

Answer 2

在按钮的click事件中添加一个返回false，否则它将提交表单并刷新页面，因为你没有定义按钮类型，它是唯一的按钮。

$(document).ready(function () {
    $("button").click(function () {
        $("#divTest1").hide();
        $("p").hide();
        return false;
    });
});

http://jsfiddle.net/wefKu/

Answer 3

您没有定义jQuery，您添加了Visual Studio jQuery文档参考，而不是实际的jQuery库。

您是否尝试过添加实际的jQuery引用？

<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>

或

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

而不是

<script src="Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>

Answer 4

$(document).ready(function() {
    $("button").click(function() {
        $("#divTest1").hide();
        $("p").hide();

        return false; // after you click, stop the default form action to avoid the redirect
    });
});

Answer 5

你可以尝试

$(document).ready(function () {
$("button").click(function (event) {
    event.preventDefault();
    $("#divTest1").hide();
    $("p").hide();
});

}）;

无法使JQuery工作

5 个答案: