jQueryUI模式刷新页面关闭

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

您的问题在于事件委派，我认为您的取消点击事件永远不会执行，因为.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');
});

演示版