如何使用 Ajax 加载评估 javascript 代码答案

【问题标题】：How to eval javascript code with Ajax loading如何使用 Ajax 加载评估 javascript 代码
【发布时间】：2013-08-29 17:12:10
【问题描述】：

我们测试了一个自定义的 ajax 导航，现在我们使用 Turbolinks 但他不支持 IE8 & 9。所以现在我们想使用兼容完整浏览器的 wiselinks。

但是我们很难在每个页面之间执行 Javascript 代码。

这里是代码：

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery.role
//= require wiselinks
//= require_tree ../..
//= require_self

var startSpinner, stopSpinner;

startSpinner = function() {
  $('#loading-indicator').show();
};

stopSpinner = function() {
  $('#loading-indicator').fadeOut();
};

$(document).ready(function() {
  window.wiselinks = new Wiselinks($('#PageContainer'));
  $(document).off('page:loading').on('page:loading', function(event, $target, render, url) {
    console.log("Loading: " + url + " to " + $target.selector + " within '" + render + "'");
    startSpinner();
  });
  $(document).off('page:redirected').on('page:redirected', function(event, $target, render, url) {
    return console.log("Redirected to: " + url);
  });
  $(document).off('page:always').on('page:always', function(event, xhr, settings) {
    console.log("Wiselinks page loading completed");
    stopSpinner();
  });
  $(document).off('page:done').on('page:done', function(event, $target, status, url, data) {
    console.log("Wiselinks status: '" + status + "'");
  });
  $(document).off('page:fail').on('page:fail', function(event, $target, status, url, error, code) {
    console.log("Wiselinks status: '" + status + "'");
  });
});

job.js：

$('@JRP').ready(function(){
    console.log('AVF');
    var $container = $("#component-view .list");
    $container.isotope({
        itemSelector: '.job',
        masonry: {
            gutterWidth: 0
        }
    });
    $container.toggleClass('grid').toggleClass('list').isotope( 'reLayout' ).isotope();
        // creates select dropdown

    $("#job-result-options-filter").click(function(e){

        $("#facetwrapper").slideToggle();
    });
    $("#job-result-options-filter").pageslide({ href: '#facets' });

    $('#toggle-sizes').click(function(){
        $container
                .toggleClass('grid')
                .toggleClass('list')
                .isotope('reLayout');
        return false;
    });

});

如果我对页面 Job 进行空白刷新，则执行 JS，但如果我来自加载 ajax 的链接，则不会执行 JS，并且我的错误日志中没有任何内容。

我如何调试这个？还是在渲染作业页面时找到执行JS的方法？

这里使用的宝石：https://github.com/igor-alexandrov/wiselinks

【问题讨论】：

我不明白$('@JRP')是什么？
这是一个 jquery 角色选择器，我有
我想知道在元素上调用ready() 是否有效。 .ready() 方法只能在匹配当前文档的 jQuery 对象上调用，所以选择器可以省略。 api.jquery.com/ready
如果我这样做： $('@JRP').ready(function(event, $target, status, url, data) { 刷新空白，JS 被加载和评估，但ajax 调用不是。gem 的创建者告诉我使用 page:done，而不是 ready
我知道page:done，因为我以前使用过这个宝石。我刚刚说过，根据文档，ready() 的使用是不合法的。然后，您在同一页面上有两个文档就绪事件。

【解决方案1】：

我的解决方案很简单。这个想法不是在准备好文档时调用您的自定义代码。相反，将它们全部包装到一个 jQuery 函数中，然后在 document ready 和 page:done 处调用此函数。

// You custom code
$.fn.my_app_init = function() {
 console.log('AVF');
 //...
 $('#toggle-sizes').click(function(){
 //...
};

$(document).ready(function() {
  $(document).my_app_init(); // Call this function
  window.wiselinks = new Wiselinks($('#PageContainer'));

  $(document).off('page:always').on('page:always', function(event, xhr, settings) {
    console.log("Wiselinks page loading completed");
    stopSpinner();
    $(document).my_app_init(); // Call this again on page change.
  });     
});

【讨论】：