0

我正在使用引导程序的模式，我想在模式的顶部有一个导航栏，它使用 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');
    });
}

};
4

1 回答 1

0

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

假设您要使用 替换内容.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/

于 2013-03-15T00:05:25.623 回答