Открыть диалог () для нескольких кнопок

Question

Я вызываю данные из базы данных, и я хотел бы поместить кнопку «Добавить» рядом с каждой строкой данных, чтобы при щелчке на них открывалось диалоговое окно jquery. На данный момент это работает только для первого «добавления». Вот мой код:

    $wgOut->addScript('<script type="text/javascript"> 

    ( function($) {
        $(document).ready(function() {
        $(function() {          
        $( "#alignment" )
            .dialog({
                autoOpen: false,
                title: "Align Images",
                //draggable: false,
                resizable: false,
                buttons: {"Okay": function() {$(this).dialog("close");}},

        });

        $("#imageSetting")
            .click(function() {
            $( "#alignment" ).dialog("open");
        });
        });     
        }); 
    } ) ( jQuery );

</script>'); 

$wgOut->addHTML('<div id="alignment">'); 
  $out = self::alignment();   
  $wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');


 $dbr = wfGetDB( DB_SLAVE );
 $results = $dbr->query("SELECT DISTINCT  img_name, img_description, img_width, img_height, img_user_text, img_timestamp
        FROM wiki_image
        ORDER BY img_timestamp ASC
    "); 

$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);        
}


$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>'); 

foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');     
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('thumnail image'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>'); 
}

$wgOut->addHtml('</table>');
}

Как сделать так, чтобы кнопка «add» в цикле foreach вызывала диалог jquery для каждой строки данных?

Answer 1

вы добавляете кнопку с одинаковым идентификатором в каждую строку. Таким образом, ваш ID не ID. Вы хотите использовать класс и изменить свой селектор для привязки событий к этому классу.

Кстати: ваш tr в цикле не закрыт.

Answer 2

цикл foreach, вероятно, выводит кнопки Add с идентичными идентификаторами , в этом случае измените код так, чтобы кнопки Add имели одинаковый класс и прикрепили список событий кэтот класс как

foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button class="imageSetting">Add</button></td><td>');     
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('thumnail image'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>'); 
}

$wgOut->addHtml('</table>');
}

изменить селектор как

$(".imageSetting").click(function() {
            $( "#alignment" ).dialog("open");
        });