javascript - requireJS - 使用 ajax 请求

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

---

在这种情况下，工具提示不起作用。仅当我剪切 $('[rel=tooltip]').tooltip(); 并粘贴到 btn0.html 中时才有效:

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

我的问题是。如何组织 btn0.html 中所需的 javascript 代码？是否可以将btn0.html的JS内容放在app.js中？

Answer 1

加载 btn0.html 时，您必须调用 tooltip() 函数。 初始化该页面时，带有 rel="tooltip" 的元素不存在。

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