2

index.html

<link href="Styles/bootstrap.css" rel="stylesheet" />
<script data-main="Scripts/app" src="Scripts/require.js"></script>

<a class="btn0">button 0</a>
<div class="target"></div>

app.js

require({
    paths : {
        jQuery : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        tooltip : 'bootstrap-tooltip'
    }
});

require([ 'jQuery' ], function() {
    require(['tooltip' ], function() {
        $(".btn0").click(function() {
            $(".target").load('btn0.html');
        });

        $('[rel=tooltip]').tooltip();
    });
});

btn0.html

 Wouldn't it be nice to see a Tooltip <a href="#" rel="tooltip" title="Oh yeah!">here</a>?

この状況では、ツールチップは機能しません。$('[rel=tooltip]').tooltip();次のようにbtn0.htmlでカットアンドペーストした場合にのみ機能します。

<script>
$('[rel=tooltip]').tooltip();
</script>

私の質問はです。btn0.htmlで必要なjavascriptコードをどのように整理しますか？btn0.htmlのJSコンテンツをapp.jsに入れることは可能ですか？

4

1 に答える 1

5

tooltip()btn0.html がロードされたときに関数を呼び出す必要があります。rel="tooltip"そのページを初期化するときにを持つ要素は存在しません。

require([ 'jQuery' ], function() {
  require(['tooltip' ], function() {
    $(".btn0").click(function() {
      $(".target").load('btn0.html', function ()
      {
        $('[rel=tooltip]').tooltip();
      })
    });
  });
});
于 2012-04-17T17:23:01.500 に答える