web-dev-qa-db-ja.com

jQuery preventDefault（）が機能しない

私は次のコードを持っています：

$(document).ready(function(){

    $("div.subtab_left li.notebook a").click(function(event) {
    event.preventDefault();
    return false;   
    });

});

しかし、要素をクリックすると、デフォルトのアクションが妨げられません..なぜですか？

コードを次のように変更する場合：

$(document).ready(function(){

    $("div.subtab_left li.notebook a").click(function() {
    e.preventDefault();
    alert("asdasdad");
    return false;   
    });

});

それはデフォルトのアクションを停止しますが、警告しません.. jQuery docsで答えが見つかりませんでした。

完全なコードは次のようになります。

$(document).ready(function(){

$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});

    $("div.subtab_left li.notebook a").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    alert("asdasdad");
    return false;

    });

});

hTML構造は次のとおりです。

<div id="tabs">
<ul id="nav">
<li><a id="tab1" href="#tab-1"></a></li>
<li><a id="tab2" href="#tab-2"></a></li>
<li><a id="tab3" href="#tab-3"></a></li>
<li><a id="tab4" href="#tab-4"></a></li>
</ul>

<div class="tab" id="tab-1">
        <script type="text/javascript">$(document).ready(function(){$("ul.produse li").hover(function () {
        $("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});
    </script>

    <div class="subtab_left"> 
        <ul>
            <li class="notebook"><a href="#">1</a></li>
            <li class="netbook"><a href="#">2</a></li>      
            <li class="allinone"><a href="#">2</a></li> 
            <li class="desktop"><a href="#">2</a></li> 
            <li class="procesoare"><a href="#">2</a></li> 
            <li class="placi_video"><a href="#">2</a></li>    
            <li class="hdd_desktop"><a href="#">2</a></li>
            <li class="tv_plasma"><a href="#">2</a></li>
            <li class="tv_lcd"><a href="#">2</a></li>
            <li class="telefoane_mobile last_item"><a href="#">2</a></li>
        </ul>
    </div>
javascript-eventsevent-handlingjquery
27
pufos

更新

そして、あなたの問題があります-あなたはdoいくつかのa要素のイベントハンドラをクリックする必要があります。この場合、ハンドラーはその順序で起動されるため、ハンドラーをアタッチする順序は重要です。

ここに 作業フィドル があり、これは希望する動作を示しています。

これはあなたのコードでなければなりません：

_$(document).ready(function(){


    $('#tabs div.tab').hide();
    $('#tabs div.tab:first').show();
    $('#tabs ul li:first').addClass('active');

    $("div.subtab_left li.notebook a").click(function(e) {
        e.stopImmediatePropagation();
        alert("asdasdad");
        return false;
    });

    $('#tabs ul li a').click(function(){
        alert("Handling link click");
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div.tab').hide();
        $(currentTab).show();
        return false;
    });

});
_

ハンドラーをアタッチする順序が交換されており、e.stopImmediatePropagation()を使用して他のクリックハンドラーの起動を停止し、_return false_を使用してリンクに従うデフォルトの動作を停止します（同様にイベントのバブリングを停止します__e.stopPropagation_）のみを使用する必要がある場合があります。

e.stopImmediatePropagation()を削除すると、2番目のクリックハンドラーのアラートが最初のアラートの後に発生することがわかります。 _return false_を削除してもこの動作には影響しませんが、ブラウザーがリンクをたどる原因になります。

注

より良い修正方法は、セレクターが完全に異なる要素のセットを返すようにすることです。これにより、オーバーラップはありませんが、これは常に可能とは限りません。

  1. 最初のコードスニペットが機能しない理由がわかりません。停止したいというデフォルトのアクションは何ですか？

    他のイベントハンドラをリンクにアタッチした場合は、代わりに event.stopPropagation() および event.stopImmediatePropagation() を調べる必要があります。 _return false_は_event.preventDefault_andevent.stopPropagation()の両方を呼び出すことと同等であることに注意してください。ref

  2. 2番目のコードスニペットでは、eは定義されていません。そのため、e.preventDefault()でエラーがスローされ、次の行は実行されません。言い換えると

    _$("div.subtab_left li.notebook a").click(function() {
    e.preventDefault();
    alert("asdasdad");
    return false;   
});
_

    あるべき

    _//note the e declared in the function parameters now
$("div.subtab_left li.notebook a").click(function(e) {
    e.preventDefault();
    alert("asdasdad");
    return false;   
});
_

実際の例 は、このコードが実際に機能することと、リンクのフォローのみを停止する場合は_return false_が実際に必要ないことを示しています。

49
no.good.at.coding

これを試してください：

   $("div.subtab_left li.notebook a").click(function(e) {
    e.preventDefault();
    return false;   
    });
7
Blerim J

これを試して：

$("div.subtab_left li.notebook a").click(function(e) {
    e.preventDefault();
});
2
Šime Vidas

私はちょうど同じ問題を抱えていた-多くの異なるものをテストしてきました。しかし、それはうまくいきません。その後、jQuery.comのチュートリアルの例をもう一度確認してみました。

jQueryスクリプトはafter参照する要素である必要があります！

そのため、スクリプトはアクセスしたいhtmlコードの後に​​ある必要があります！

そうしないとjQueryがアクセスできないようです。

1
northK

すでに送信アクションでテストしている場合、それも機能しないことに気づきました。

その理由は、フォームがすでに$(document).read(...に投稿されているからです

したがって、あなたがする必要があるのは、それを$(document).load(...に変更することだけです

さて、あなたがブラウザを開いた瞬間に、ページが実行されます。

そして動作します; D

1
chroda

e.preventDefault();が機能しない場合は、代わりにe.stopImmediatePropagation();を使用する必要があります。

詳細については、以下を参照してください。 event.stopPropagationとevent.preventDefaultの違いは何ですか？

$("div.subtab_left li.notebook a").click(function(e) {
    e.stopImmediatePropagation();
});
0
Antoine Subit