Question

我正在尝试为rails网站构建几个页面，我的js文件正在混淆。我想知道在使用rails资产管道的同时处理特定于页面的js的最佳实践。

我的猜测是我的问题是由于单独的文件中的onload函数编译成一个而引起的，但我可能是错的。

我有一个运行以下javascript代码的着陆页：

$(document).ready(function() {
      getQuote();
      $('#get-quote').on('click', getQuote);
      $('#btn-twitter').on('click', function() {openURL(url);});
    });
function getQuote() {
      $.when($.ajax( {
      url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        var post = data.shift();
        var author = post.title;
        if($(post.content).text().length > 250) {
          getQuote();
        } else {
          var quote = $(post.content).text();
          setTweetText(quote, author);
          $('#quote-author').html(author);
          $('#quote-content').html(quote);
        }
      },
      cache: false
    })).then(function(){
      $('#content').show();
      $('#msg').hide();
    })
}

function openURL(url){
  window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
var url = "";
function setTweetText(quote, author) {
  url = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + " -" + author);
}

然后，一旦他们点击主页，布局模板将运行以下内容：

$(document).ready(function() {
    document.getElementById("dd-button").addEventListener("click", ddClicked);
    window.onclick = function(event) {
        if (!event.target.matches('#dd-button')) {
            document.getElementById("dd-menu").classList.remove("dd-show");
        }
    }

    function ddClicked() {
        console.log("dd clicked");
        document.getElementById('dd-menu').classList.add("dd-show");
    }
});

我在两个页面上都收到如下错误：

Cannot read property 'addEventListener' of null

和

Uncaught ReferenceError: $ is not defined

我们非常感谢您订购我的代码的任何帮助。

Rails JS文件和布局

0 个答案: