Jquery get Element auf delegiertes Ereignis geklickt

Ich habe ähnliche Fragen gesehen, aber sie lösen dieses Problem nicht. Ich habe einen HTML-Code, der wie folgt aussieht:Jquery get Element auf delegiertes Ereignis geklickt

<div id="products" class="container-fluid"> 
    <div class="selected_product_div panel panel-default"> 
      <div class="panel-body"> 
       <a style="{cursor: pointer;}" class = "delete_product pull-right"><i class="fa fa-close"></i></a>     
      </div> 
     </div> 
    </div> 
</div>

So, nach dem delegierte Ereignis auslöst, ich mag das <a class="delete_product"></a> Element erhalten. Aber $(this) bedeutet das übergeordnete Element <div id="products> Element.

$("#products").on("click",".delete_product", function(){    
     console.log($(this).hasClass(".delete_product")); 
}

Natürlich loggt die Konsole falsch. Wie kann ich das angeklickte Element erhalten?

$(this).find(".delete_product") ist keine Option, da es viele Elemente mit der delete_product Klasse gibt.

Quelle

2016-09-05 alejoss

Sie var Erklärung dafür verwenden könnte. 'var that = $ (this) .find ('. delete_product');' Innerhalb der Funktion, und Sie haben diese Schaltfläche in Variable. Oder liege ich falsch? – Mardzis

@Mardzis Das geht nicht, da es viele Elemente mit der '.delete_product' Klasse gibt. – alejoss

'$ (this)' sollte Ihr Link sein – putvande

Versuchen Sie folgendes:

$(document).ready(function(){ 

    $("#products").on("click",".delete_product", function(){ 

     alert($(this).hasClass("delete_product")); 

    }) 

})

Schlusscode:

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
     <style> 
 
     </style> 
 
    </head> 
 
    <body> 
 
     
 
     <div id="products" class="container-fluid"> 
 
      
 
      <div class="selected_product_div panel panel-default"> 
 
       
 
        <div class="panel-body"> 
 
         <a class = "delete_product pull-right" href="#"><i class="fa fa-close">Click Me!</i></a>     
 
        </div> 
 
       
 
      </div> 
 
      
 
    </div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      
 
     $(document).ready(function(){ 
 

 
      $("#products").on("click",".delete_product", function(){ 
 

 
       alert($(this).hasClass("delete_product")); 
 

 
      }) 
 

 
     }) 
 
     
 
     </script> 
 
    </body> 
 
</html>

Quelle

2016-09-05 19:30:45 Ehsan

Sie sollten den Punkt im Argument hasClass nicht haben. Es ist kein Wähler, sondern ein Name, den Sie passieren:

$("#products").on("click",".delete_product", function(){ 
    console.log($(this).hasClass('delete_product')); 
});

jQuery hat das Element stellen die Wähler als this entsprechen. Wie bereits erwähnt in der jQuery documentation:

Wenn jQuery einen Handler aufruft, das this Schlüsselwort ein Verweis auf das Element ist, wo das Ereignis geliefert wird; [...] für delegierte Ereignisse ist dies ein Element, das zu selector passt.

Für Informationen nur: es gibt natürlich eine andere Methode, wo Sie können (und sollten) einen Selektor (mit dem Punkt):

$("#products").on("click",".delete_product", function(){ 
    console.log($(this).is('.delete_product')); 
});

Quelle

2016-09-05 18:56:32 trincot

Könnte der Downvoter bitte erklären, was das Problem ist? – trincot

müssen Sie die Zieleigenschaft des Ereignisses verwenden . Hier ist der Code, der Ihnen das genaue .delete_product gibt.

$("#products").on("click", ".delete_product", function (ev) { 
    var $t = $(ev.target); 
    $t = $t.is('.delete_product') ? $t : $t.parents('.delete_product'); 
    console.log($t.hasClass("delete_product")); 
});

Quelle

2016-09-05 19:05:39

Dies schlägt fehl, wenn der 'a' Link untergeordnete Elemente hat, wie' Hellothere '. Wenn sich der Klick auf einem dieser untergeordneten Elemente befindet, ist das Ziel nicht das Element "a", während dies immer noch der Zweck des delegierten Ereignishandlers ist. – trincot

Ja, deshalb überprüfen wir, ob das Ziel .delete_product ist oder nicht. wenn nicht, dann finde ich es Elternteil mit dieser Klasse. Das macht es kindersicher, vorausgesetzt, ein Kind/Elternteil hat keine Klasse delete_product. Sinn ergeben? ** $ t = $ t.is ('. delete_product')? $ t: $ t.parents ('. delete_product'); ** Diese Zeile macht es kindersicher. :) –

Sie haben hinzugefügt, dass 'if' und ja mit dieser Bedingung es funktioniert, aber jQuery macht bereits diese Aufgabe ... es ist besser, davon Gebrauch zu machen. – trincot

Jquery get Element auf delegiertes Ereignis geklickt

Antwort

Verwandte Themen