Question

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>?

---

In this situation, the tooltip doesn’t work. Only works if i cut $('[rel=tooltip]').tooltip(); and paste in btn0.html like:

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

My question is. How organize the javascript code that is needed in btn0.html? It is possible put the JS content of btn0.html in app.js?

Answer 1

You have to call tooltip() function when btn0.html is loaded.
Element with rel="tooltip" does not exist when inicializing that page.

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