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

第二次没有阻止默认行为，因为在if var更改为buttonClicked后它没有运行true语句。表单只是在没有dialog的情况下提交。

dialog未在buttonClicked点击true时Yes标记为dialog，因此buttonClicked不会再次打开。

很难从代码中了解{{1}}标志的用途是什么。

多个对话框确认仅适用一次

1 个答案: