Question

我正在使用bootstrap的模态，我希望在模式的顶部有一个导航栏，使用jquery的.load来更改模式的视图。我可以使用默认视图显示模式，但是单击时我无法触发其余按钮。下面是我想要的简化版本。谢谢你的帮助。

<div class="modal-header">
    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button>
    <h3 id="myModalLabel">Account Settings</h3>
</div>
<div class="modal-body">
    <div class="btn-group">
        <button id="account" class="btn">Account</button>
        <button id="edit-account-users" class="btn">Users</button>
    </div>
    <div class="wrapper">
    <!-- Content -->
    </div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss='modal' aria-hidden='true'>Close</button>
</div>


$(document).ready(function () {
    accountData.init();
});

var accountData = {
    'init' : function() {
        $('.account-settings, #account-settings #account').click(function() {
            $('#account-settings').load('/partials/account/index.html', function() {
            $('#account-settings .wrapper').load('/partials/account/account_data.html');
        });
    });

    $('#edit-account-users').click(function() {
        $('#account-info .wrapper').load('/partials/account/account_users.html');
    });
}

};

Answer 1

您的按钮未触发的原因是您的事件绑定可能附加到不再存在的元素。

假设您要使用.load()替换内容，则元素的原始事件处理程序将丢失。这就是为什么事件委托在这里非常有用，将事件绑定到文档而不是单个元素。（您不会替换document）因此，当用户点击页面内的任何内容时，document和委派会将事件提取到子元素提供给选择器，例如。 #edit-account-users。

使用事件委派.on()代替.click()。

$(document).on('click', '#edit-account-users', function() {
        $('#account-info .wrapper').load('/partials/account/account_users.html');
});

详细了解.on()：http://api.jquery.com/on/

使用.load从导航栏加载页面

1 个答案: