web-dev-qa-db-fra.com

jQuery preventDefault () ne fonctionne pas

J'ai le code suivant:

$(document).ready(function(){

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

});

mais quand je clique sur l'élément .. cela n'empêche pas l'action par défaut .. Pourquoi?

et lors de la modification du code pour:

$(document).ready(function(){

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

});

il arrête l'action par défaut mais n'alerte pas .. Je n'ai trouvé aucune réponse sur les documents jQuery.

Le code complet se présente comme suit:

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

    });

});

et la structure HTML est:

<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

Mise à jour

Et il y a votre problème - vous faites devez cliquer sur les gestionnaires d'événements pour certains éléments a. Dans ce cas, l'ordre dans lequel vous attachez les gestionnaires est important car ils seront renvoyés dans cet ordre.

Voici n violon qui fonctionne qui montre le comportement que vous souhaitez.

Cela devrait être votre code:

$(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;
    });

});

Notez que l'ordre d'attachement des gestionnaires a été échangé et e.stopImmediatePropagation() est utilisé pour empêcher le déclenchement de l'autre gestionnaire de clics tandis que return false Est utilisé pour arrêter le comportement par défaut de suivre le lien (ainsi comme arrêter le bouillonnement de l'événement. Vous pouvez constater que vous devez utiliser uniquement e.stopPropagation).

Jouez avec cela, si vous supprimez la e.stopImmediatePropagation() vous constaterez que l'alerte du gestionnaire de second clic se déclenchera après la première alerte. La suppression du return false N'aura aucun effet sur ce comportement mais entraînera le suivi des liens par le navigateur.

Remarque

Une meilleure solution pourrait être de s'assurer que les sélecteurs renvoient des ensembles d'éléments complètement différents afin qu'il n'y ait pas de chevauchement, mais cela pourrait ne pas toujours être possible, auquel cas la solution décrite ci-dessus pourrait être une façon d'envisager.

  1. Je ne vois pas pourquoi votre premier extrait de code ne fonctionnerait pas. Quelle est l'action par défaut que vous voyez que vous souhaitez arrêter?

    Si vous avez attaché d'autres gestionnaires d'événements au lien, vous devriez plutôt regarder event.stopPropagation() et event.stopImmediatePropagation() . Notez que return false Équivaut à appeler les deux event.preventDefault etevent.stopPropagation()ref

  2. Dans votre deuxième extrait de code, e n'est pas défini. Une erreur serait donc lancée sur e.preventDefault() et les lignes suivantes ne s'exécuteraient jamais. En d'autres termes

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

    devrait être

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

Voici n exemple de travail montrant que ce code fonctionne effectivement et que return false N'est pas vraiment requis si vous voulez seulement arrêter le suivi d'un lien.

49
no.good.at.coding

Essaye celui-là:

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

Essaye ça:

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

j'ai juste eu les mêmes problèmes - j'ai testé beaucoup de choses différentes. mais ça ne marcherait pas. puis j'ai vérifié à nouveau les exemples de tutoriels sur jQuery.com et j'ai découvert:

votre script jQuery doit être après les éléments auxquels vous faites référence!

votre script doit donc être après le code html auquel vous souhaitez accéder!

semble que jQuery ne peut pas y accéder autrement.

1
northK

Si vous avez déjà testé avec une action de soumission, vous avez remarqué que cela ne fonctionne pas trop.

La raison en est que le formulaire est déjà affiché dans une $(document).read(...

Donc, tout ce que vous devez faire est de changer cela en $(document).load(...

Maintenant, au moment où vous chargez la page, il va s'exécuter.

Et fonctionnera; D

1
chroda

Si e.preventDefault(); ne fonctionne pas, vous devez utiliser e.stopImmediatePropagation(); à la place.

Pour plus d'informations, consultez: Quelle est la différence entre event.stopPropagation et event.preventDefault?

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