简单 jQuery .mousewheel 函数未在现场调用但在 fiddle 中有效？

Question

这很简单明了 - 我正在尝试调用一个 jQuery 函数，它只会触发一个 alert();，但我不明白为什么它不起作用。虽然在 fiddle 中工作......出于某种奇怪的原因。我知道这很草率，但我会给你们这个页面的完整代码（不是很多），因为我不明白为什么它在 fiddle 但在我的网站上不起作用。

更新： 将鼠标滚轮文件的全部内容剪切并粘贴到此页面，而不是引用它。还是不行。问题不在于脚本的路径或我引用它的方式。问题出在别处...

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

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

这是一个 fiddle： http://jsfiddle.net/ekmpwjhh/2/

Answer 1

你确定这个脚本

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

Answer 2

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

简单 jQuery .mousewheel 函数未在现场调用但在 fiddle 中有效？

Simple jQuery .mousewheel function not getting called on site but works in fiddle?

jquery

jsfiddle

mousewheel