jQueryUI模式刷新页面关闭

在我的jQueryUI模式中，无论何时点击按钮，父页面都会刷新，即使我有preventDefault()或return false。这是预期的行为？jQueryUI模式刷新页面关闭

的HTML：

<li><a id="addFunds" class="no-close" href="#">Add Funds</a></li>

模态：

<div id="addFundsModal" class="modal-hidden" title="Add Funds to Your Account"> 
    <div class="leftBar"> 
     <h3>Add Funds</h3> 
       //other stuff 
       <form> 
         //<fieldset>, etc. 
         <button class="modal-close btnBlue" href="#">Cancel</button> 
       <button class="add-funds btnGreen">Add Funds</button> 
     </form> 
    </div> 
</div>

jQuery的：

$('#loggedInDropdown').on('click', '#addFunds', function(e) { 
     e.preventDefault(); 
     $('#addFundsModal').dialog({ 
      modal: true, 
      dialogClass: 'no-close', 
      width: 500 
     }); 
    }); 

    $('.ui-dialog').on('click', '.modal-close', function(e) { 
     e.preventDefault(); 
     $('#addFundsModal').dialog('close'); 
    });

我也不能确定我是否应该使用dialog.close或dialog.destroy，但这是另一个职位，我想。

来源

2013-09-30 trysis

我们通常附加.dialog选项里面的按钮行为：

.dialog({ 
     resizable: false, 
     height:240, 
     modal: true, 
     buttons: { 
     "Delete all items": function() { 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    });

来源

2013-09-30 22:25:10 Blaise

谢谢，这可能会工作。现在，为什么刷新页面的默认操作？ – trysis

我注意到取消按钮，有'href =“＃”'。你为什么想要那样？ – Blaise

我听说它有帮助。即使关闭它，它仍然在发生。 – trysis

你的问题是在事件代表团，我认为取消永远不会因为.ui-dialog执行点击事件仅创建了第一次点击在链接上，因此最初将该事件附加到该类不会产生任何效果（因为.ui-dialog当时不存在），并且具有正常的按钮行为表单提交，页面刷新。

尝试：

$('#addFundsModal').on('click', '.modal-close', function (e) { 
    e.preventDefault(); 
    $('#addFundsModal').dialog('close'); 
});

，或者适用于类（一定要好）

$('.modal-hidden').on('click', '.modal-close', function (e) { 
    e.preventDefault(); 
    $('#addFundsModal').dialog('close'); 
});

Demo

来源

2013-09-30 22:26:19 PSL

这对于一个按钮来说完美无缺。另一个按钮，我正在做其他事情，但我可以使用相同的想法。 – trysis

@trysis你希望表单提交的其他按钮是否正确？它的工作正常，否则你可以做的是不需要提交表单的按钮给他们所有的同一类并绑定事件。对于其他人在他们自己的处理程序中处理它。 – PSL

并且更好地销毁对话关闭事件中的对话框。你可以订阅它 – PSL

jQueryUI模式刷新页面关闭

回答

相关问题