jquery: "auf" Klick-Ereignis funktioniert nicht in Tabelle

Question

Ich weiß, dass diese Frage doppelt ist Ich lese andere Fragen und Antworten, aber kann kein Ergebnis erhalten.

Ich habe eine dynamische Tabelle:

HTML

<table id="networklist" class="table table-hover"> 
    <thead> 
    <tr> 
     <th>name</th> 
     <th>icon</th> 
     <th>username</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
      // forech is here 
     <tr data-rowid="@dto.Id"> 
     // more td 
      <td> 
       <i id="delete" data-id="@dto.Id" class="fa fa-trash" style="margin-left: 1em; cursor: pointer"></i> 
       <i id="edit" data-id="@dto.Id" class="fa fa-pencil" style="cursor: pointer"></i> 
      </td> 
     </tr> 

    </tbody> 
</table> 

JS

$("#networklist").on("click","tr i #delete",function() { 
    debugger; 

var id = $(this).data("id"); 

}); 

ich diese und viele andere Selektoren versuchen, aber klicken Ereignis nicht funktioniert. Wie kann ich dieses Problem lösen?

Update: Ich habe keine eindeutige ID in delete und edit ich habe es auf tr.

Answer 1

id Notwendigkeit für jedes Element eindeutig sein. So gehen Sie mit class wie folgt: -

Demo Beispiel: -

$("#networklist").on("click","tr i.delete ,tr i.edit",function() { 
 
var id = $(this).data("id"); 
 
    console.log(id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="networklist" class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>icon</th> 
 
     <th>username</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
     <tr data-rowid="@dto.Id"> 
 
      <td>ABC</td> 
 
      <td>ICON</td> 
 
      <td>ALIVE</td> 
 
      <td> 
 
       <i data-id="1" class="fa fa-trash delete" style="margin-left: 1em; cursor: pointer">del</i> 
 
       <i data-id="2" class="fa fa-pencil edit" style="cursor: pointer">edit</i> 
 
      </td> 
 
     </tr> 
 
     <tr data-rowid="@dto.Id"> 
 
      <td>DEF</td> 
 
      <td>ICON</td> 
 
      <td>DIE</td> 
 
      <td> 
 
       <i data-id="3" class="fa fa-trash delete" style="margin-left: 1em; cursor: pointer">del</i> 
 
       <i data-id="4" class="fa fa-pencil edit" style="cursor: pointer">edit</i> 
 
      </td> 
 
     </tr> 
 

 
    </tbody> 
 
</table>

Answer 2

Versuchen Sie, diese Linie zu ändern:

$("#networklist").on("click","tr #delete",function() { 

Weil Ihre Wähler falsch ist. Es gibt kein Element mit der ID #delete in i Tag. Und Sie sollten Klasse verwenden .delete statt id weil id im Dokument

eindeutig sein sollte

Answer 3

Sie müssen tr i#delete nicht tr i #delete Ziel. Derzeit werden Targeting auf untergeordnete Elemente von i Tags angewendet, während Sie die Tags i mit dem Eigenschaftswert "delete" von id targetieren müssen.

$("#networklist").on("click", "tr i#delete", function() { 
 
    alert('clicked!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<table id="networklist" class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>icon</th> 
 
     <th>username</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    <tr data-rowid="@dto.Id"> 
 
     <td>Chris</td> 
 
     <td>My icon</td> 
 
     <td>Tumbleweed</td> 
 
     <td> 
 
     <i id="delete" data-id="@dto.Id" class="fa fa-trash" style="margin-left: 1em; cursor: pointer"></i> 
 
     <i id="edit" data-id="@dto.Id" class="fa fa-pencil" style="cursor: pointer"></i> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

jedoch wie andere haben darauf hingewiesen, ist die Verwendung des Attributs id in Ihrem Szenario nur alles falsch. Vielleicht sollten Sie Ihren Code überdenken und es wie so etwas ändern:

$("#networklist").on("click", ".delete", function() { 
 
    alert('clicked!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<table id="networklist" class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>icon</th> 
 
     <th>username</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr data-rowid="@dto.Id"> 
 
     <td>Chris</td> 
 
     <td>My icon</td> 
 
     <td>Tumbleweed</td> 
 
     <td> 
 
     <i data-id="@dto.Id" class="fa fa-trash delete" style="margin-left: 1em; cursor: pointer"></i> 
 
     <i data-id="@dto.Id" class="fa fa-pencil edit" style="cursor: pointer"></i> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

Ihre Wähler sucht

<tr><td><i><x id="delete"></i></td></tr> 

Der Raum, in dem Selektor ist auf der Suche nach einem Kind der i nicht die i itself. Auch IDs müssen eindeutig sein, so dass Sie die gleiche ID nicht mehrmals verwenden können, also machen Sie es zu einem Klassennamen.

<i data-id="@dto.Id" class="fa fa-trash delete" ...> 

und ändern die Auswahl

$("#networklist").on("click","tr i.delete",function() { 
    var id = $(this).data("id"); 
});