Forms 多对话框确认只工作一次

我有一个php页面，在这里我进行搜索，从数据库返回数据。数据显示在一个html表中，在每个项目中都有一个删除项目的选项。当我点击这个删除按钮时，它应该会打开一个对话框，我正在使用jqueryui，在这个对话框中，我必须选择是否要取消或确认操作。一切正常，然后我注意到对话框只在表的第一项中起作用。当我点击其他按钮时，他们只是完成了删除操作，没有确认。这是代码，如果有人能在这方面帮助我，我将非常高兴：

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

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>"; 
            }
        }
    } 
    (...)

---

将代码更改为：

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

它不会第二次阻止默认行为，因为在buttonClicked变量更改为true后，它不会运行if语句。表单只是提交，没有对话框

对话框不会再次打开，因为在对话框中单击“是”时，when buttonClicked标志为true

---

很难从代码中看出buttonClicked标志的用途。

你能发布生成的HTML吗？@j08691我用生成的代码编辑了这篇文章：发布了新的HTML代码后，你会说那块HTML被重复了一遍又一遍。是否包括id为delete的delete按钮？如果是这样，就不能在文档中重复使用ID。ID必须是唯一的。你也许可以把它改成一门课。谢谢：我没注意到。我将ID更改为类，并删除了一个无用的标志，现在它工作正常。@j4m这是您的if语句。对话框无法打开，因为在对话框中单击“是”时，您将buttonClicked设置为true。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();
             }
         }            
      });          
   });

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