Pourquoi event.target à l'intérieur de jquery ne fonctionne pas

Question

Voici le code que j'essayais de placer. C'est très simple, mais event.target ne se déclenche pas alors que les autres gestionnaires d'événements normaux fonctionnent.

$(function($){ 
 
    
 
    var container = $('#container'); 
 
    
 
    function init() { 
 
    container.on('click', open) 
 
    } 
 
    
 
    function open() { 
 
    
 
    if(event.target === container) { 
 
     alert ("hi"); 
 
    } 
 
    } 
 
    
 
     init(); 
 

 
})(jQuery);

body, html { 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
#container { 
 
    height: 500px; 
 
    width:800px; 
 
    margin:0 auto; 
 
    background-color:#444; 
 
} 
 

 
h1{ 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id = "container"> 
 
    <h1>Testing</h1> 
 
</div>

Le premier problème est que, TypeError: $ (...). n'est pas une fonction

Le deuxième problème est que même si cela fonctionne dans google chrome, il montre toujours l'erreur ci-dessus.

La troisième erreur est que, bien que la fonction s'exécute dans le navigateur, elle ne fonctionne pas lorsque je place, event.target === commande de conteneur. Cependant, si je simplifie simplement console.log event.target, il me renvoie l'identifiant div du conteneur. Toutefois, lorsque j'ajoute cette vérification de event.target, cela cesse de fonctionner.

Je suis coincé, quelqu'un pourrait-il me aider à expliquer pourquoi ce problème se produit

Merci

Answer 1

1. Les deux valeurs ne sont pas à même référaient objet de référence en javascript.

$('#container') est un objet jQuery et d'obtenir l'objet DOM HTML dont vous avez besoin pour récupérer l'élément zeroth dans l'objet Jquery. Alors que le event.Target retourne l'élément HTML DOM. Ce que vous essayez de faire est de comparer différents objets et donc cette condition ne passe jamais.

$('#container')$('#container') est un sélecteur d'ID et peut renvoyer plusieurs éléments correspondants (même ID pour plus d'un élément dans le code HTML), vous devez donc obtenir l'élément zeroth retourné par Jquery Object. Jquery Object est un wrapper autour de l'élément HTML et inclut des propriétés et des méthodes supplémentaires.

2. Retirez le $ de $(function($){, il est fondamentalement un modèle de Ia vie.

Donc, vous devez modifier votre code comme mentionné ci-dessous.

(function($){ 
 
    
 
    var container = $('#container'); 
 
    
 
    function init() { 
 
    container.on('click', open) 
 
    } 
 
    
 
    function open() { 
 
    if(event.target === container[0]) { 
 
     alert ("hi"); 
 
    } 
 
    } 
 
    
 
     init(); 
 

 
})(jQuery);

body, html { 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
#container { 
 
    height: 500px; 
 
    width:800px; 
 
    margin:0 auto; 
 
    background-color:#444; 
 
} 
 

 
h1{ 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id = "container"> 
 
    <h1>Testing</h1> 
 
</div>