Question

这非常简单和干燥 - 我试图调用一个只触发alert();的jQuery函数，但我无法弄清楚它为什么不起作用。虽然工作在小提琴...由于一些奇怪的原因。我知道这很草率但是我会给你们这个页面的全部代码（它不是很多），因为我无法弄清楚它为什么在小提琴中起作用而不是在我的站点。

更新：将鼠标滚轮文件的全部内容剪切并粘贴到此页面中，而不是引用它。仍然不起作用。问题不在于脚本的路径或我引用它的方式。问题出在其他地方......

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

        // In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.
        div.horizontal {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: static;
        }

        .table {
            display: table;
            table-layout: fixed;
            width: 100%;
            height: 100%;
        }

        .table > section {
            width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.
            height: 100%;
            display: table-cell;
            background: #e3e3e3;
            vertical-align: middle;
            text-align: center;
        }
    </style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/scripts/mousewheel.js"></script>
    <script type='text/javascript'>
        jQuery(function ($) {
        $("body").mousewheel(function (event, delta) {
            alert('hello');
        });
    });
    </script>
</head>

<body>
    <div class="horizontal">
        <div class="table">
            <section>
                <h1>Full-Screen Horizontal Layouts</h1>
                <p>Made with <code>display: table-cell;</code></p>
                <p>By Ezequiel Bruni</p>
            </section>
            <section>
                <h1>Full-Screen Horizontal Layouts</h1>
                <p>Made with <code>display: table-cell;</code></p>
                <p>By Ezequiel Bruni</p>
            </section>
            <section>
                <h1>Full-Screen Horizontal Layouts</h1>
                <p>Made with <code>display: table-cell;</code></p>
                <p>By Ezequiel Bruni</p>
            </section>
        </div>
    </div>
</body>

当用户滚动时，不应该触发警报吗？为什么这不起作用？我在控制台中没有错误。

这是一个小提琴： http://jsfiddle.net/ekmpwjhh/2/

Answer 1

我看到你正在使用Wordpress。尝试将jQuery(function ($) {替换为jQuery(document).ready(function($){，这是我学过的Wordpress技巧。

Answer 2

你确定这个脚本

<script type="text/javascript" src="http://localhost:8888/wordpress/wp-content/themes/DigitalBrent/scripts/mousewheel.js"></script>

正确加载？尝试使用此文件的相对路径，如

<script type="text/javascript" src="/scripts/mousewheel.js"></script>。

简单的jQuery .mousewheel函数没有在网站上调用但在小提琴中工作？

2 个答案: