[解決済み] 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ドキュメントで答えを見つけられませんでした。

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

$(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>

解決方法は？

更新情報

そして、そこにあなたの問題があります。 する のイベントハンドラをクリックする必要があります。 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 と event.stopPropagation() ^レフ

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 は、リンクの追跡を止めるだけなら、実は必要ないのです。