在ajax调用后重新加载脚本

I use Plangular which is a directive that use Angular JS and Soundcloud API to play some songs. Of course it needs Soundcloud jdk, angular and its js.

I tryed then to load dynamically external content in a div through ajax in this way:

$(document).ready(function(){
    $("body").on('click', '#chart_best',function(){
        $.ajax({url: "chart_best.html", success: function(result){
            $(".container").html(result);
        }});
    });
    $("body").on('click', '#chart_best_indie_pop',function(){
        $.ajax({url: "chart_best_indie_pop.html", success: function(result){
            $(".container").html(result);
        }});
    });
    $("body").on('click', '#chart_best_punk',function(){
        $.ajax({url: "chart_best_punk.html", success: function(result){
            $(".container").html(result);            
        }});
    });
});

The new content is loaded correctly, but the player simple doesn't work. It sounds like it needs to reload the JS after the ajax call. I tryed use a .live but it doesn't work. Also tryed to remove the script and reload them through a $.getScript() but still the player doesn't work. I replicated the issue in this project: https://codepen.io/GoingSolo/project/editor/DNVyJD/ if you click on the left list to load new content, the player simple stop working. Which is the best way to re-load all the scripts Plangular needs to work after my ajax call?

查看全部
weixin_33739523
weixin_33739523
2017/04/30 23:11
  • angularjs
  • ajax
  • javascript
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

1个回复