Plusieurs boutons d'interface utilisateur jQuery avec le même ID

Question

Il y a peut-être une solution très simple à cette question, mais je ne la vois pas!

J'ai une page avec une liste d'articles. chaque élément a le même bouton jquery ui (son intérieur d'une boîte de dialogue et ajoute cet élément à une liste). j'identifie l'article via la DIV parentale qui contient l'ID DB. Jusqu'ici tout va bien ...

Le problème est seulement le premier bouton sur la liste fonctionne! Les deuxième, troisième, etc. boutons ne montrent aucune réaction du tout. Les boutons ont tous le même identifiant: la liste est dynamique et la même action est déclenchée à chaque clic. Seul l'identification parentale change.

Heres la partie d'affichage:

<div id="2"> 
    <div id="56"> 
    <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_2.mp3</button> 
    </div> 
</div> 

<div id="2"> 
    <div id="57"> 
    <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_3.mp3</button> 
    </div> 
</div> 

Et ici vient la partie js:

$('#add-audio-file').click(function() { 
     assetID = $(this).parent('div').attr('id'); 
     pageID = $(this).parent('div').parent('div').attr('id'); 
     $.post(
      "modules/portfolio/serialize.php", 
      {id : pageID, assetid : assetID, do : "add-audio-file"}, 
       function(data, textStatus, xhr) { 
        $('#dialog-add-audio').dialog('close'); 
       } 
     ); 

    }); 

J'utilise jquery 1.4.2 jquery ui 1.8rc3 Toutes les idées?

Answer 1

Les boutons ont tous le même identifiant

id est l'identifiant d'un élément, vous ne pouvez pas définir que pour plus d'un élément. Essayez de donner vos boutons class à la place et voir si cela fonctionne après cela.

Answer 2

Les identifiants en double dans un document ne sont-ils pas une mauvaise pratique?

Answer 3

Cela fonctionne lorsque vous mettez élément bouton

en html:

<input type="button" value="MyButton1" /> 
<input type="button" value="MyButton2" /> 
... 
<input type="button" value="MyButtonN" /> 

en javascript de jquery-ui:

search for: $("#button").button(); 
then replace or add $('[type="button"]').button();" 

ex

$("#button").button(); 
$('[type="button"]').button();