web-dev-qa-db-ja.com

jQuery：li要素のクリックイベントが機能しないのはなぜですか？

Li要素がクリックされたときにDiv要素「nav」を移動したい。

Divにリストがあります

<div id="nav">
    <ul>
        <li><a href="#t1">Flyer</a></li>
        <li><a href="#t2">Code</a></li>
        <li><a href="#t3">Angebot</a></li>
        <li><a href="#t4">Bilder</a></li>
    </ul>
</div>

これがjqueryで機能しないのはなぜですか？

$("#nav ul li").click(function(){
    $("#nav").animate({ 
        marginLeft: "-300px",
    }, 1000 );
});
jqueryjquery-animatehtml-lists
9
user2477311

コードは期待どおりに正常に機能します。 JSFiddle を表示してください。

JQuery DOMReadyイベントに入れるようなことを忘れているような気がします。

コードが次のようになっていることを確認してください（DOM Ready内）

$(document).ready(function(){ // When the DOM is Ready, then bind the click
    $("#nav ul li").click(function(){
        $("#nav").animate({ 
            marginLeft: "-300px",
        }, 1000 );
    });
});

ページに他のJavaScriptエラーがないことを確認し（このコードの前にエラーが発生すると、コードは機能しません）、コンソールを確認します（chrome右クリック>要素の検査>コンソール）。

これらの2つの問題の1つが問題を引き起こしています（ほとんどの場合）。そうでない場合は、自分でデバッグする必要があります（またはより多くのコードを表示する必要があります）。

6
Anil

使用しているJqueryのバージョンに応じて、これは機能する場合と機能しない場合があります。

$('body').on('click', '#nav ul li', function(){
    $("#nav").animate({ 
        marginLeft: "-300px",
    }, 1000 );
});

これらのliを動的に生成している場合は、呼び出されたときに「委任されたイベント」をバインドする必要があるため、$（ 'body'）を実行しました。

9
MonkeyZeus

期待どおりに機能しますが、li要素をクリックする必要があります。アンカーをクリックすると、一部のブラウザで破損する可能性があります。

これに対するより良いアプローチがあります。

[〜＃〜] html [〜＃〜]

<div id="nav">
 <ul>
 <li><a href="#t1">Flyer</a></li>
 <li><a href="#t2">Code</a></li>
 <li><a href="#t3">Angebot</a></li>
 <li><a href="#t4">Bilder</a></li>
 </ul></div>

jQuery

(function($) {
    var nav = $('#nav');

    nav.find('a').on('click',function(e){
        e.preventDefault();
        nav.animate({ 
            marginLeft: "-300px",
        }, 1000 );
    });
})(jQuery);

そしてもちろん、フィドル： http://jsfiddle.net/dKPqJ/

0
Chris

これを試してみてください。コードにもエラーはないと思います。

私の知る限り、float：leftプロパティを＃navに指定すると、コードは機能します。

positionを設定すると、次のコードが機能します。

$(document).ready(function(){
 $("#nav ul li").click(function()
 {
    $("#nav").animate({ 
     left: "-=300px",
    }, 1000 );
 });
});

またはこれを試してください

$(document).ready(function(){
 $("#nav ul li").click(function()
 {
   $("#nav").animate({
       "left": "-=300px"
    },
  "slow");
 });
});
0
Ricky