Nimmt nur das erste Datenattribut

Question

Ich habe 3 Tabellenzeilen mit verschiedenen Daten-ID = "" und ich möchte, dass jQuery diese ID an einen Absatz anhängen. Also meine HTML ist wie folgt:

<tr> 
<td id="pmd" data-id="123">First cell</td> 
</tr> 
<tr> 
<td id="pmd" data-id="456">Second cell</td> 
</tr> 
<tr> 
<td id="pmd" data-id="789">Third cell</td> 
</tr> 

<p id="tp"></p> 

Und meine jQuery ist wie folgt:

$('#pmd').click(function(event) { 
    var po = $(this).data('id'); 
    $("#tp").append(po); 
}); 

Aber das jQuery-Code nimmt nur die erste Tabelle der Zellendaten-ID und nicht die zweite und die dritte Reihe der Daten IDs.

Natürlich ist dies nur ein Teil meines Codes, weil ich den $ verwenden muß _POST PHP

Dank

Answer 1

Verwenden derselben ID ist Regelverletzung. Tu das nicht. Verwenden Sie Klasse statt ID.

$('.pmd').click(function(event) { 
 
    var po = $(this).data('id'); 
 
    $("#tp").append(po); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td class="pmd" data-id="123">First cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="456">Second cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="789">Third cell</td> 
 
    </tr> 
 
</table> 
 
<p id="tp"></p>

Wenn Sie nicht wollen, Ihre HTML-Klick td statt id.But gleiche ID ist eine schlechte Praxis ändern. Ich empfehle es nicht.

$('td').click(function(event) { 
 
    var po = $(this).data('id'); 
 
    $("#tp").append(po); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td class="pmd" data-id="123">First cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="456">Second cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="pmd" data-id="789">Third cell</td> 
 
    </tr> 
 
</table> 
 
<p id="tp"></p>

Answer 2

Sie haben doppelten IDs in Ihrem Code. Aufgrund dessen wählt $('#pmd') Selektor erstes Element mit ID pmd. IDs müssen eindeutig sein. Was können Sie tun, ist

1) Sie können eher gemeinsame Klasse verwenden (sagen PMD) und dann Klassenauswahl verwenden, um das Ereignis anhängen:

$('.pmd').click(function(event) { 
    var po = $(this).data('id'); 
    $("#tp").append(po); 
}); 

2) td-Elemente mit id-Attribut Daten in Tabelle finden und Hängen Sie das Ereignis an sie an:

$('table td[data-id]').click(function(event) { 
    var po = $(this).data('id'); 
    $("#tp").append(po); 
});