0

在我的 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.closeor dialog.destroy，但我想那是另一篇文章。

4

2 回答 2

1

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

演示

于 2013-09-30T22:26:19.357 回答
1

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

.dialog({
      resizable: false,
      height:240,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
于 2013-09-30T22:25:10.493 回答