jQuery-click-Ereignis funktioniert nicht, nach dem hinzufügen-Klasse

In meiner JSP-Seite, die ich Hinzugefügt einige links:

<a class="applicationdata" href="#" id="1">Organization Data</a>
<a class="applicationdata" href="#" id="2">Business Units</a>
<a class="applicationdata" href="#" id="6">Applications</a>
<a class="applicationdata" href="#" id="15">Data Entity</a>

Es verfügt über eine jQuery-Funktion registriert für das click-Ereignis:

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");
    $('#gentab a').addClass("tabclick");
    $('#gentab a').attr('href', '#datacollector');
});

Wird es fügen Sie eine Klasse tabclick zu <a> innerhalb <li> mit id="gentab". Es ist in Ordnung. Hier ist mein code für die <li>:

<li id="applndata"><a class="tabclick" href="#appdata" target="main">Application Data</a></li>
<li id="gentab"><a href="#datacollector" target="main">General</a></li>

Nun habe ich ein jQuery-click-handler für diese links

$("a.tabclick").click(function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

Für den ersten link, es funktioniert einwandfrei. Es ist die Alarmierung der <li> id. Aber für das zweite <li>, wo die class="tabclick" ist Hinzugefügt wurden, indem Sie zunächst jQuery funktioniert nicht.

Versuchte ich $("a.tabclick").live("click", function(), aber dann den ersten link klicken-Ereignis war auch nicht arbeiten.

Verwenden 'auf' Ereignis Delegationen
über Ereignis-delegation, sehen dies SO Frage : stackoverflow.com/questions/8110934/...

InformationsquelleAutor Shiju K Babu | 2013-06-03

jquery

164

Da die class dynamisch Hinzugefügt wird, müssen Sie die Verwendung von event-delegation zum registrieren der event handler
```
$(document).on('click', "a.tabclick", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});
```
Dies funktioniert auch, wenn das gesamte element wird Hinzugefügt, nachdem die code-Ausführung, fantastisch!
können Sie help mich bitte ?

InformationsquelleAutor Arun P Johny
15

Sollten Sie die folgenden verwenden:
```
$('#gentab').on('click', 'a.tabclick', function(event) {
    event.preventDefault();
    var liId = $(this).closest("li").attr("id");
    alert(liId);  
});
```
Diese werden befestigen Sie Ihr Ereignis für alle Anker innerhalb der #gentab element,
reduziert den Umfang von vorher zu prüfen, das ganze document element Baum und Steigerung der Effizienz.

InformationsquelleAutor palaѕн
12

.live() ist veraltet.Wenn Sie verwenden möchten, für die Delegierte Elemente dann verwenden .auf() mit der folgenden syntax
```
$(document).on('click', "a.tabclick", function() {
```
Diese syntax wird für die Arbeit delegiert Veranstaltungen

.auf()

InformationsquelleAutor PSR
6

Basierend auf @Arun P Johny das ist, wie man es für eine Eingabe:
```
<input type="button" class="btEdit" id="myButton1">
```
Dies ist, wie ich es habe in jQuery:
```
$(document).on('click', "input.btEdit", function () {
    var id = this.id;
    console.log(id);
});
```
Diese melden sich auf der Konsole: myButton1.
@Arun gesagt, Sie müssen zum hinzufügen von Ereignis-dinamically, aber in meinem Fall brauchen Sie nicht zu rufen, die Eltern zuerst.

UPDATE

Obwohl es wäre besser zu sagen:
```
$(document).on('click', "input.btEdit", function () {
    var id = $(this).id;
    console.log(id);
});
```
Da dies die JQuery-syntax, obwohl beide funktionieren.

ist es this.id oder $(this).attr("id") ?
Hey @ShijuKBabu ich habe versucht, $(this).attr("id") und ich bekam eine Ausnahme. Aber dies funktionierte gut auf Google Chrome, verwenden Sie einen anderen browser, wenn es fehlschlägt?
Ich habe nicht versucht. Ich bekam schon die Antwort für das, was ich wollte. Dies ist für die input-Taste. Ich habe nur gefragt, weil ich bin mit $(this).attr("id") zu Holen-id des aktuellen Objektes, und es funktioniert für mich

InformationsquelleAutor G Jeny Ramirez

auf dem document-ready-event-es gibt keine ein-tag mit der Klasse tabclick. so haben Sie zu binden, klicken Sie auf Ereignis dynamisch, wenn Sie hinzufügen tabclick Klasse. bitte diesen code:

$("a.applicationdata").click(function() {
    var appid = $(this).attr("id");

   $('#gentab a').addClass("tabclick")
    .click(function() {
          var liId = $(this).parent("li").attr("id");
         alert(liId);        
      });


 $('#gentab a').attr('href', '#datacollector');

});

InformationsquelleAutor SP Singh

Hier ist die andere Lösung, die bind-Methode.

$(document).bind('click', ".intro", function() {
    var liId = $(this).parent("li").attr("id");
    alert(liId);        
});

Prost 🙂

InformationsquelleAutor Ujjwal

0

Ich Weiß, das ist ein altes Thema...aber keiner der oben genannten hat mir geholfen.
Und nach der Suche eine Menge, und alles versucht...ich kam mit dieser.

Entfernen Sie zunächst die auf code aus dem $(document).bereit Teil und legen Sie es in einem separaten Abschnitt.
dann stellen Sie Ihre klicken Sie auf code in ein $(function(){......}); code.

Wie diese:
```
<script>
  $(function(){
    //your click code
    $("a.tabclick").on('click',function() {
      //do something
    });
  });
</script>
```
InformationsquelleAutor FD gi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.