除了选择文档之外,JQuery选择器似乎不起作用

时间:2012-10-07 08:24:03

标签: jquery

我一直在努力学习如何在PHP中使用jQuery AJAX。

我的问题是,每当我选择document以外的任何其他元素时,似乎没有任何作用。我想要的是在按下提交按钮后无法阻止页面加载。

我尝试过使用jQuery代替$,但仍然没有运气。

老实说,我不确定我在做什么,而且我已经尝试了几个小时寻找解决方案。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $("p").click(function() { 
         alert('test');
    });
    $("form").submit(function() { 
         alert('test');
         return false;
    });
</script>
<title>Insert title here</title>
</head>
<body>
    <form action="process.php" method="post">
        Inputs:<br />
        <textarea rows="15" cols="60" id="input" name="input">Some text...
        </textarea><br /><br />
        Start:
        <input type="text" id="start" name="start" />
        End:
        <input type="text" id="end" name="end" /><br />
        <input type="submit" id="submit" name="submit" value="Submit">
    </form>
    <p id="output">Output: Some Random Text</p>
</body>
</html>

2 个答案:

答案 0 :(得分:5)

您的JavaScript在页面的其余部分加载之前正在运行。要修复它,请将脚本移动到页面底部(在结束</body>标记之前),或使用jQuery .ready() method将事件处理程序绑定到DOM ready事件:

$(document).ready(function () {
    // Your code in here
});

//or, use the shorthand form:

$(function () {
    // Your code here
});

旁注

  

我尝试过使用jQuery代替$,但仍然没有运气。

jQuery$之间没有区别。两者都只是包含对同一对象的引用的标识符。它通常更容易使用$(只是因为它更短)除非你使用另一个库以及需要该标识符的jQuery(例如PrototypeJS),在这种情况下你可以告诉jQuery放弃对它的控制使用$方法的.noConflict()标识符。

答案 1 :(得分:2)

您尝试在加载前选择元素。文档加载后,使用document ready事件运行代码。

<script>
    $(function()
    {
        $("p").click(function() { 
             alert('test');
        });
        $("form").submit(function() { 
             alert('test');
             return false;
        });
    });
</script>