javascript - JQuery 选择器无法从外部 js 文件运行

Question

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

2. 然后我有 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 函数未绑定(bind)到此 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"]
            })  
        }
    })
});