Несколько диалоговых подтверждений работают только один раз

Question

У меня есть эта страница php, где я выполняю поиск, который возвращает данные из базы данных. Данные отображаются в таблице html, и в каждом из элементов есть возможность удалить элемент. Когда я нажимаю на эту кнопку удаления, предполагается открыть диалог (я использую jquery ui), в котором я должен выбрать, хочу ли я отменить или подтвердить операцию. Все работало нормально, тогда я заметил, что диалог работает только в первом элементе таблицы. Когда я нажимаю на другие, они просто завершают операцию удаления без подтверждения. Вот код, я был бы рад, если кто-то может помочь мне в этом:

action.js

(...) 
    var buttonClicked = false; 

    $(function(){   
     $('#delete').click(function(event){ 
      if(!buttonClicked){ 
       event.preventDefault(); 
       $('#dialogConfirm').dialog('open');     
      }    
     });   
     $('#dialogConfirm').dialog({ 
     autoOpen: false, 
     modal: true, 
     width: 250, 
     height: 225, 
     buttons: { 
      "No": function() {  
       buttonClicked = false; 
       $(this).dialog('close'); }, 
      "Yes": function() {  
       buttonClicked = true; 
       $(this).dialog('close'); 
       document.forms['formdelete'].submit();} 
     }    
     });   
    }); 
    (...) 

mypage.php (соответствующую часть функции, которая генерирует таблицу)

(...) 
function listResults($query, $num, $type) {  
if($tipo == "product") { 
    if($num > 1) { 
     echo "<hr>"; 
     echo "<h3>$num occurrences were found:</h3>"; 
     echo "<div id='dialogConfirm' title='Warning!'><p>Are you sure you want to delete it?</p></div>"; 

    echo "<table id='table1'>"; 
    echo "<tr><td><b>Product</b></td> <td><b>Label</b></td></tr>"; 
    while($row = mysql_fetch_assoc($query)) { 
    echo "<tr id='icons'><td>" . $row['product'] . "</td><td>" . $row['label'] . "</td> 
     <td><form action='#' method='POST'><button class='ui-state-default ui-corner-all' title='View'><span class='ui-icon ui-icon-image'></span></form></td> 
     <td><form action='editProduct.php' method='POST'><input type='hidden' name='id' value='".$row['id']."' /><button class='ui-state-default ui-corner-all' title='Edit'><span class='ui-icon ui-icon-pencil'></span></form></td> 
     <td><form action='delete.php' method='POST' id='formdelete'><input type='hidden' name='produto' value='".$row['id']."' /><button class='ui-state-default ui-corner-all' id='delete' title='Delete'><span class='ui-icon ui-icon-trash'></span></form></td></tr>"; 
    } 
    echo "</table>";   
    } 
    else { 
     if($num == 0) { 
      echo "<h1>No occurrence was found.</h1>";    
     } 
     else { 
      echo "<h1>$num occurrence was found:</h1>"; 
      while($array = mysql_fetch_assoc($query)) { 
      echo "<li>" . $array['product'] . "</li>" . $array['label'] . "<br><br>"; 
      } 
     } 
    } 
    (...) 

сгенерированный HTML:

<div id='dialogConfirm' title='Warning!'><p>Are you sure you want to delete it?</p> </div> 

<table id='table1'> 
<tr> 
    <td><b>Product</b></td> 
    <td><b>Label</b></td> 
</tr> 

<tr id='icons'><td>IBP</td><td>Dixtal</td> 
<td><form action='#' method='POST'> 
    <button class='ui-state-default ui-corner-all' title='View'><span class='ui-icon ui-icon-image'></span></button> 
</form></td> 

<td><form action='editProduct.php' method='POST'> 
    <input type='hidden' name='id' value='7' /><button class='ui-state-default ui-corner-all' title='Edit'><span class='ui-icon ui-icon-pencil'></span></button> 
</form></td> 

<td><form action='#' method='POST' id='formdelete'> 
    <input type='hidden' name='product' value='7' /><button class='ui-state-default ui-corner-all' id='delete' title='Delete'><span class='ui-icon ui-icon-trash'></span></button> 
</form></td> 

</tr> 

//and then this line of the table is repeated all over again, with different values on each iteration 

</table> 

РЕДАКТИРОВАТЬ Проблема решена. Я изменил id delete на класс и удалил флаг buttonClicked из js.

$(function(){    
     $('.delete').click(function(event){ 
      event.preventDefault(); 
      $('#dialogConfirm').dialog('open');  
     });      

     $('#dialogConfirm').dialog({ 
     autoOpen: false, 
     modal: true, 
     width: 250, 
     height: 225, 
     buttons: { 
      "Não": function() { 
       $(this).dialog('close');}, 
      "Sim": function() {      
       $(this).dialog('close');           
       document.forms['formdelete'].submit(); 
      } 
     }    
     });   
    }); 

Answer 1

Измените код следующим образом:

$('#delete').click(function(event){ 
    event.preventDefault(); //take event.preventDefault() out of if statement 
    if(!buttonClicked){ 
     $('#dialogConfirm').dialog('open');     
    }    
}); 

Это не препятствует поведение по умолчанию во второй раз, потому что она не работает в if заявление после того, как buttonClicked вар получает изменено на true. Форма просто отправляется без dialog.

The dialog не открывается снова, потому что, когда buttonClicked флаг true когда Yes нажата в dialog.

Трудно сказать по коду, что цель флага buttonClicked.