Question

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

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，但我认为这是另一篇文章。

Answer 1

我们通常在.dialog选项中附加按钮行为：

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

Answer 2

您的问题出在事件委托中，我认为您的click事件永远不会被执行，因为.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

关闭时jQueryUI模式刷新页面

2 个答案: