0

ブートストラップのモーダルを使用しています。モーダルの上部に、jqueryの.loadを使用してクリックしたときにモーダルのビューを変更するナビゲーションバーを配置したいと思います。デフォルトのビューでモーダルを表示することはできますが、クリックしたときに残りのボタンを起動できません。以下のIDは、私が欲しいものの簡略版です。助けてくれてありがとう。

<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');
});

詳細については、 http .on()：//api.jquery.com/on/をご覧ください。

于 2013-03-15T00:05:25.623 に答える