2

jqueryとtwitterのブートストラップは初めてなので、ばかげた質問はご容赦ください。

ツイッターブートストラップモーダルを設定するMVCビューがあり、これはこのビュー内に出力されるリンクによってアクティブ化されます。

モーダルでdata-remoteを使用して、MVC部分ビューのコンテンツをモーダルにロードしたいと思います。

私はこれらすべてがうまく機能しています。

しかし、私がやりたかったのは、メインビューからjqueryを介して（部分ビューから）要素にアクセスできることでした。セレクターが正しく機能していると確信していても、期待どおりに機能していません。

たとえば、クリックイベントに割り当てようとしているhrefリンクがありますが、これは起動しません。

ただし、モーダルボディにプルされた部分ビュー内に出力されるようにスクリプトを移動すると、スクリプトは機能し、クリックイベントが処理されます。

部分ビューでスクリプトを使用する必要はなく（参照されている場合でも）、メインビューで1つのスクリプトを参照します。

スクリプトをリモート部分ビュー内に配置しなくても、モーダルボディにリモートでロードされている要素にアクセスできる方法はありますか？

さらに、モーダルがデータリモートを使用せず、アンカーhrefがモーダルボディ内に直接挿入されたテストをモックアップしましたが、これを実行しても、このanchor.clickイベントにアクセスできません。メインページ。どんな提案でも大歓迎です。

さらに調査を行うと、次の投稿で答えが見つかりました 。モーダルダイアログで入力値を設定する方法は？

これは、jqueryセレクターに.modal-bodyも含める必要があることを示唆しているようです。そのため、セレクターを次のように変更しました。

 $("#TestButton").click(function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    })

これに

 $(".modal-body #TestButton").click(function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    })

そして今、私が当初予想していたようにクリックイベントが発生します。

ただし、jqueryセレクターの一部として.modal-bodyが必要な理由がわかりません。誰かがこれを説明できますか？

4

2 に答える 2

1

新しい動的コンテンツがDOMにロードされたら、クリックイベントをhrefに接続する必要があります。

ページが読み込まれると、JQueryはDOMを調べて$（ "＃TestButton"）を探しますが、これが発生した時点では動的コンテンツがまだ挿入されていないため、何も見つかりません。

これを処理する方法はいくつかあります...まず、新しいコンテンツが挿入されるまでJQueryでクリックイベントの接続を遅らせるか、JQueryの.live関数を使用できます。

コードは次のようになります。

$("#TestButton").live('click', function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    });

実際...LiveはJQuery1.7の時点で減価償却されているようです

それは...

$("#TestButton").on('click', function (ev) {
            ev.preventDefault()

            alert('Test Button Clicked'); 
        });

お役に立てれば。

于 2012-11-27T11:57:50.973 に答える
0

showクリックされた要素でHTML5データ属性を使用し、モーダルイベントをリッスンすることで、Bootstrap3のリモートコンテンツモーダルのコンテンツを操作できます。

http://jsfiddle.net/dbasch/UbpS6/

/main.html

<a data-toggle="modal" href="/remote.html" data-target="#myModal" data-merchant-name="Bob's House of Pancakes">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="te"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script type="text/javascript">

// we can't use the show.bs.modal or loaded.bs.modal events
// because the remote modal content is not accessable in the DOM
// when those events trigger

// when the remote modal content is shown  
$('#myModal').on('shown.bs.modal', function (e) {

    // get a data attribute value from the clicked element
    var merchantName = $(e.relatedTarget).data('merchant-name');

    // and set the content of the shown remote modal
    $('#myModalLabel').text(merchantName);

});

// cleanup the content of the hidden remote modal because it is cached
$('#reservationModal').on('hide.bs.modal', function (e) {

    $(this).removeData('bs.modal');

});

</script>

/remote.html

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

        </button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>

    </div>
    <div class="modal-body">
        <!-- start slipsum code -->
        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
        <!-- please do not remove this line -->
        <div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a>
        </div>
        <!-- end slipsum code -->
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>
于 2014-07-13T07:43:51.333 に答える