Question

我正在使用库jquery.peity.min.js并先加载它。

然后我myscript.js使用上面库中的函数，如下所示。

$(".donut-mult").peity("donut", {
  width: 82,height:82,
  innerRadius:35,
  fill: ["#2ac7d7", "#fff"]
})

此myscript.js在jquery.peity.min.js之后加载。

现在我对sample.jsp进行ajax调用。
sample.jsp的跨度如下
```
<span class="donut-mult">5/5</span>
```

myscript.js中的javascript函数未绑定到此span类，因此无法看到预期的可视化。

有什么建议吗？

Answer 1

如果在通过ajax加载内容之前进行jquery选择，它将无法工作，因为它们尚未存在于文档中。在调用使用这些html元素的任何函数之前，您需要先加载内容。

在myscript.js中使用此代码

$(document).ready(function() {
    // The container where you will load the content of sample.jsp
    var $container = $('#donut-container'); 

    // Load via ajax
    $.ajax({
        url: 'sample.jsp',
        type: 'GET',
        success: function(data) {
            // load sample.jsp content to the container
            $container.html(data); 

            // process the spans with class="donut-mult" loaded in the container
            // you can also use $('#donut-container .donut-mult').peity(...) 
            // instead of `$container.find`
            $container.find('.donut-mult').peity("donut", {
                width: 82,height:82,
                innerRadius:35,
                fill: ["#2ac7d7", "#fff"]
            })  
        }
    })
});

JQuery选择器无法从外部js文件工作

1 个答案: