为什么 on('click', function ()) 在 jQuery 中不起作用？ [关闭]答案

【问题标题】：Why on('click', function ()) isn't working in jQuery? [closed]为什么 on('click', function ()) 在 jQuery 中不起作用？ [关闭]
【发布时间】：2014-08-02 13:47:32
【问题描述】：

我有一个非常简单的网站，其中包含一些菜单选项卡（即主页、关于我等）和几个段落。我在我的 .JS 文件中添加了单击功能，以便单击选项卡可以导航到所需的段落（或页面）。但它不起作用。

我回帖时应该参考这个post。

[注意：我的计算机中运行着 apache，并且安装了 xwamp。我已将 jquery 源添加到我的文件中，并且它们准确地保存在正确的路径或文件中。此外，我还安装了 Bootstrap，虽然我不一定需要为它设置任何文件的路径。]

我的代码：

main.php:

    <!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>

<style type="text/css">

</style>
</head>

<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script  type="text/javascript" src="js/main_interaction.js"></script>

<div class="row">
    <div id="header" class="col-xs-12">
         <h1>Welcome to my green world!</h1>

    </div>
    <div class="col-xs-4">
        <ul>
            <li id="home">HOME</li>
            <li id="gallery">GALLERY</li>
            <li id="about">ABOUT ME</li>
            <li id="contact">CONTACT ME</li>
            <li id="diary">MY DIARY</li>
            <li id="blog">BLOG</li>
        </ul>
    </div>
    <div class="col-xs-8 home">
        <p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
    </div>
    <div class="col-xs-8 gallery hidden">
        <p>This is the gallery.</p>
    </div>
    <div class="col-xs-8 about hidden">
        <p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
    </div>
    <div class="col-xs-8 contact hidden">
        <p>Contact me here.</p>
    </div>
    <div class="col-xs-8 diary hidden">
        <p>My diary will be here.</p>
    </div>
    <div class="col-xs-8 blog hidden">
        <p>Blog posts appear here.</p>
    </div>
    <div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>

.JS：

   $("li").on('click', function () {
    $(".col-xs-8").addClass("hidden");
    $("." + $(this).attr("id")).removeClass("hidden");
});

.CSS：

    @import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
    margin: 0;
}
#header {
    background-color: mediumturquoise;
    text-align: center;
    padding: 20px;
    border: 4px solid crimson;
}
.col-xs-8 {
    text-align: center;
    font-family:'Verdana';
    color: mediumblue;
    font-size: 13pt;
}
.col-xs-4{
    border: 4px solid crimson;
    background-color: yellow;
    line-height: 40pt;
    font-family:'Tahoma';
    font-size: 15pt;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.col-xs-4 ul {
    list-style-type: none;
}
#footer {
    background-color: gray;
    border: 2px solid green;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}
li:hover {
    cursor: pointer;
    text-decoration: underline;
}

【问题讨论】：

您在控制台中遇到了哪些错误（如果有）？ $("." + $(this).attr("id")) 应该是 $("#" + $(this).attr("id")) 吗？有没有办法可以减少您发布的代码以包含reduced test case？
可能你在这里打错了：$("." + $(this).attr("id")).removeClass("hidden");应该是$("#" +...

标签： javascript php jquery css html

【解决方案1】：

您在页面上存在元素之前包含（并因此执行）JavaScript。 HTML/JavaScript 按照 DOM 中存在的顺序进行处理。所以当它运行时：

$("li")

解析器仅位于 HTML 正文的顶部，尚未将任何 li 元素加载到 DOM 中。因此，该选择器什么也找不到。

要么将 JavaScript 放在 DOM 的末尾，要么将其包装在文档就绪处理程序中：

$(function () {
    $("li").on('click', function () {
        // etc.
    });
});

（或两者兼有）

【讨论】：

好的，现在运行良好。

【解决方案2】：

on不支持jquery 1.9，试试live

$("li").live("click",function(){});

【讨论】：

【解决方案3】：

我查看了您的代码，想知道是否要替换

$("li").on('click', function () {

与

$("li").click(function() {

可以解决问题。我使用 jquery 有一段时间了，但从未使用过“.on”，但我的 onclick 工作正常。希望这会有所帮助！

【讨论】：