Question

我的代码有问题..我仍然没有理解如何使用Jquery Confirm Dialog执行函数..... 这是我的代码

       <table  align="left" id="tableQuestions" width="600">
         <tr id="rowQuestion">
          <td class="tblCell">Questions<br>
           <input type="text" name="question" size="50" id="question">
           <br>Answer<br>
            A. <input type="text" name="answerA" size="25" id="answerA"><br>
            B. <input type="text" name="answerB" size="25" id="answerB"><br>
            C. <input type="text" name="answerC" size="25" id="answerC"><br>
            D. <input type="text" name="answerD" size="25" id="answerD">
          </td>
          <td class="tblCell"><a href="#"><button class="up">Up</button></a>
           <a href="#"><button class="down">Down</button></a>
           <a href="#"><button class="removeStdInsBtn">Remove</button></a>
          </td>
         </tr>
         <tr id="rowQuestion">
          <td class="tblCell">Questions<br>
           <input type="text" name="question" size="50" id="question">
           <br>Answer<br>
            A. <input type="text" name="answerA" size="25" id="answerA"><br>
            B. <input type="text" name="answerB" size="25" id="answerB"><br>
            C. <input type="text" name="answerC" size="25" id="answerC"><br>
            D. <input type="text" name="answerD" size="25" id="answerD">
          </td>
          <td class="tblCell">
            <a href="#"><button class="up">Up</button></a>
            <a href="#"><button class="down">Down</button></a>
            <a href="#"><button class="removeStdInsBtn">Remove</button></a>
          </td>
         </tr>
        </table>
          </td>
       </tr>
       <tr>
         <td>
        <table align="left" width="100" class="form">
         <tr>
          <td class="tblCell" width="50">
           <div class="btnInput"><a href="#"><input type="button" name="add" id="acctBtnAdd" value="ADD" class="btn"></a></div>
          </td>
          <td class="tblCell" width="50">
           <div class="btnInput"><a href="#"><input type="button" name="save" id="acctBtnSave" value="SAVE" class="btn"></a></div>
          </td>
         </tr>
        </table>
<div id="dialog-confirm" title="Delete Account?">
   <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These Account will be permanently deleted and cannot be recovered. Are you sure?</p>
  </div>

这是JS

$(document).ready(function(e){

$('#dialog-confirm').dialog({
   autoOpen: false,
   resizable: false,
   height:160,
   modal: true,
   buttons: {
    DELETE': function() {
       **/*How can i delete rows here ???????*/**
    },
    'CANCEL': function() {
       $(this).dialog('close');
    }
     }
    });

}

 $('#tableQuestions tr button.removeStdInsBtn').click(function(e){
   e.preventDefault();
   $('#dialog-confirm').dialog('open');
   /* I put my code here for delete row.. but must not here because it only call  $('#dialog-confirm').dialog('open');*/
   //$(this).parent().parent().parent().remove();

});

现在，我将我的代码放在$（'＃tableQuestions tr button.removeStdInsBtn'）中。单击以删除行..但是如果我使用对话框确认，则此函数内部仍调用$（'＃dialog-confirm' ）.dialog（ '开放'）;所以在$（'＃dialog-confirm'）。对话框中我们将把我们的代码移除行...但我不能，它不起作用....任何人都可以吗？

Answer 1

试试这个 - 基本上，每次单击removeStdInsBtn时，它都会设置对话框中的“按钮”，并在单击DELETE时传递要删除的元素。

当前元素存储在一个变量中并传递（如果你试图'传递'这个它最终会使用对话框按钮，而不是你要删除的行。

 $(document).ready(function(e){ 
    $('#dialog-confirm').dialog({
       autoOpen: false,
       resizable: false,
       height:160,
       modal: true,
    });

    $('#tableQuestions tr button.removeStdInsBtn').click(function(e){
       e.preventDefault();
       var delItem = this;
       $('#dialog-confirm').dialog("option", "buttons", { "DELETE": function() { $(delItem).parent().parent().parent().remove(); },  "CANCEL": function() { $(this).dialog("close"); }} );
       $('#dialog-confirm').dialog('open');
    });
}

如何使用JQuery Confirm Dialog执行功能？

1 个答案: