ライブサイトで実行されていないjQueryスクリプトとの衝突

Question

.on（）または別のスクリプトが競合している可能性があります。私は全く考えていない。

WORKING：jsFiddles http://jsfiddle.net/ZtpEU/70/
の相続人は、スクリプトNOT-WORKING：ここでは、ライブコードです：http://designobvio.us/test/middle.php

は、これらの両方は、同じコードです。ただし、ライブサイトでは、ページ下部のjqueryスクリプトは実行されません。誰が紛争がどこに作られているか知っていますか？私はそれを作成した後、私はスクリプトを冗談からコピーしました。

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だ