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

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 更改为一个类，并从 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 变量更改为 true 之后它没有运行 if 语句。表单只是在没有dialog 的情况下提交。

dialog 不会再次打开，因为当在dialog 中单击Yes 时buttonClicked 标志为true。

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