多個對話框確認只能工作一次

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> 

EDIT 問題解決。我將id delete更改爲一個類，並從js中刪除了buttonClicked標誌。

$(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');     
    }    
}); 

沒有阻止默認行爲的第二次，後因buttonClicked VAR被改爲true它沒有運行if聲明。該表格只提交沒有dialog。

的dialog沒有因爲當buttonClicked標誌true當點擊在dialogYes再次打開。

很難從代碼中知道buttonClicked標誌的用途是什麼。