与未在实时站点上执行的 jQuery 脚本冲突

Question

问题可能是因为 .on() 或其他脚本冲突。我的想法为零。

工作：这是 jsFiddles 上的脚本http://jsfiddle.net/ZtpEU/70/
不工作：这是实时代码：http://designobvio.us/test/middle.php

这两个是相同的代码；但是，在实时站点上，页面底部的 jquery 脚本不会执行。有谁知道冲突是在哪里制造的？因为我在创建脚本后从 fiddles 逐字复制了脚本。

HTML

<ul id="videos">
    <li><a href="#">shit swag people say</a></li>
    <li><a href="#">imdabest</a></li>
    <li><a href="#">jersey shore audition</a></li>
    <li><a href="#">rifle burs</a></li>
    <li><a href="#">mvc3: best combos dat ass</a></li>
    <li><a href="#">snacks</a></li>
</ul>​

CSS

ul#videos > li > a
{
    opacity: .5;
    color: #222;
    text-decoration: none;
}

ul#videos:hover > li > a
{
    opacity: .3;
    text-shadow: 0px 0px 6px #bbb;
    color: #bbb;
} 

ul#videos > li:hover > a
{
    opacity: 1;
    text-shadow: none;
    color: #222;
}

脚本

$("ul#videos li a").on('mouseenter', function() {
    $(this).animate({"padding-left": "50px"}, "normal");
});

$("ul#videos li a").on('mouseleave', function() {
    $(this).stop(true).animate({"padding-left": "0px"}, "slow");
});​

​

Answer 1

您的实时版本的第 59 行似乎有一个不可打印的字符。它就在分号之后但在换行符之前。将您的 JS 复制/粘贴到 jsbeautifier 或其他东西中以对其进行清理。这为我解决了问题：

$(document).ready(function () {
    alert('hello');
    $("ul#videos li a").on('mouseenter', function () {
        $(this).animate({
            "padding-left": "50px"
        }, "normal");
    });
    $("ul#videos li a").on('mouseleave', function () {
        $(this).stop(true).animate({
            "padding-left": "0px"
        }, "slow");
    });
});

Answer 2

倒数第二个后面有一个奇怪的空白字符

});

尝试删除该行并重新创建。

你应该使用像 jslint 这样的东西来捕捉这样的东西。

Answer 3

刚刚意识到您的.on() 函数应该这样重写：

$("#videos li").on({

    mouseenter: function() {
         $(this).animate({"padding-left": "50px"}, "normal");
    },

    mouseleave: function() {
         $(this).stop(true).animate({"padding-left": "0px"}, "slow");

}}, 'a');

这样，您的标记只有一个处理程序，如果您以后想添加其他事件，只需将它们添加到列表中即可。

这是jsfiddle