JQuery不工作 - rails

我無法讓我的jquery從資產管道工作，並且我嘗試了很多東西來修復，沒有任何工作，我似乎無法弄清楚這一點。我現在有一個簡單的jquery函數來測試它。請注意，它在我將jQuery代碼放入HTML中時起作用。JQuery不工作 - rails

應用程序/ Javascript角/ application.js中

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap 
//= require_tree . 


$("#hide").click(function(){ 
    $("p").hide(); 
}); 

$("#show").click(function(){ 
    $("p").show(); 
});

HTML

<body> 

<p>If you click on the "Hide" button, I will disappear.</p> 

<button id="hide">Hide</button> 
<button id="show">Show</button> 

</body>

的Gemfile

source 'https://rubygems.org' 

gem 'pg',   '0.17.1' 
gem 'rails',  '4.2.2' 
gem 'puma',   '3.4.0' 
gem 'sass-rails', '4.0.3' 
gem 'uglifier',  '3.0.0' 
gem 'coffee-rails', '4.1.0' 
gem 'jquery-rails', '4.1.1' 
gem 'turbolinks', '2.3.0' 
gem 'jbuilder',  '2.2.3' 
gem 'bootstrap-sass',  '3.2.0.0' 
gem 'sdoc', '~> 0.4.0', group: :doc 
gem 'contact_us', '~> 1.0.1' 
gem 'simple_form' 
gem 'aws-sdk', '< 2.0' 
gem 'will_paginate' 
gem 'ransack' 
gem 'figaro' 
gem 'jquery-turbolinks' 

gem 'devise' 
gem 'devise_security_extension' 
gem 'stripe' 

group :development, :test do 
    gem 'pg',    '0.17.1' 
    gem 'byebug',  '3.4.0' 
    gem 'web-console', '2.0.0.beta3' 
    gem 'spring',  '1.1.3' 
    gem 'foreman' 
end 


group :production do 
    gem 'pg',    '0.17.1' 

end

配置/開發

Rails.application.configure do 

    # Settings specified here will take precedence over those in config/application.rb. 

    # In the development environment your application's code is reloaded on 
    # every request. This slows down response time but is perfect for development 
    # since you don't have to restart the web server when you make code changes. 
    config.cache_classes = false 
    config.assets.initialize_on_precompile = false 

    # Emailer. 
    config.action_mailer.default_url_options = { :host => 'localhost:3000' } 
    config.action_mailer.raise_delivery_errors = true 

    config.action_mailer.smtp_settings = { 
    address: "smtp.sendgrid.net", 
    port: 587, 
    domain: ENV["HEROKU_DOMAIN"], 
    authentication: "plain", 
    enable_starttls_auto: true, 
    user_name: ENV["SENDGRID_USERNAME"], 
    password: ENV["SENDGRID_PASSWORD"] 
    } 
    # Do not eager load code on boot. 
    config.eager_load = false 

    # Show full error reports and disable caching. 
    config.consider_all_requests_local  = true 
    config.action_controller.perform_caching = false 

    # Don't care if the mailer can't send. 
    config.action_mailer.raise_delivery_errors = false 

    # Print deprecation notices to the Rails logger. 
    config.active_support.deprecation = :log 

    # Raise an error on page load if there are pending migrations. 
    config.active_record.migration_error = :page_load 

    # Debug mode disables concatenation and preprocessing of assets. 
    # This option may cause significant delays in view rendering with a large 
    # number of complex assets. 
    config.assets.debug = true 

    # Asset digests allow you to set far-future HTTP expiration dates on all assets, 
    # yet still be able to expire them through the digest params. 
    config.assets.digest = true 

    # Adds additional error checking when serving assets at runtime. 
    # Checks for improperly declared sprockets dependencies. 
    # Raises helpful error messages. 
    config.assets.raise_runtime_errors = true 


    # Raises error for missing translations 
    # config.action_view.raise_on_missing_translations = true 
end

來源

2016-11-23 richiepop2

你可以嘗試的一件事？刪除「需求樹」。並在底部放置「需要渦輪鏈接」。 –

謝謝，Jagjot。剛剛嘗試過，但沒有奏效。我無法讓jquery工作的事實令人尷尬。從未在任何其他應用程序中發生過我。將jquery代碼放入html中時工作，但不在application.js文件中。 – richiepop2

你可以把這個應用程序放入回購站並分享鏈接嗎？如果這是可能的。:) –

您的元素尚未出現在頁面上。所以只是簡單的包裝在jQuery的document.ready你的行動等待他們

$(document).ready(function() { 
    $("#hide").click(function(){ 
    $("p").hide(); 
    }); 
});

Documentation: $(document).ready()

來源

2016-11-27 11:02:22 itsnikolay

工作！謝謝@itsnikolay！ – richiepop2

@ richiepop2我很高興它幫助你:) – itsnikolay

檢查，如turbolinks加載事件：

document.addEventListener("turbolinks:load", function() { 
    $("#hide").click(function(){ 
    $("p").hide(); 
    }); 

    $("#show").click(function(){ 
    $("p").show(); 
    }); 
})

來源

2016-11-23 21:04:57 neydroid

謝謝@neydriod。當我添加加載事件時，我仍然沒有迴應。 – richiepop2

-1

您可以通過創建上面提到的HTML文件對應的.js.erb文件做到這一點，並添加了jQuery在那裏面。例如，假設html位於index.html.erb中，請創建index.js.erb並將jquery放入其中。

index.js.erb的：萬一

$(function() { 
$.getScript("/<model name path>.js"); 
});

在那裏你可以把型號名稱路徑（如posts.js）：

$("#hide").click(function(){ 
    $("p").hide(); 
}); 

$("#show").click(function(){ 
    $("p").show(); 
});

然後在application.js中，該附加你的url是index頁面的/ posts。我在我的系統中複製了所有這些內容，並在這裏工作。

來源

2016-11-23 21:14:53 VishalTheBeast

這是荒謬的。你爲什麼要這樣做，而不是僅僅在你的模板中包含一個JavaScript文件？ – sevenseacat

請解釋你的意思是「將JavaScript文件包含到你的模板中」 – VishalTheBeast

~~爲什麼不嘗試在 app/assets/javascripts文件夾中創建一個新文件並將代碼放在此處？的 application.js第一行說~~

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file.

確保你的資產重新編譯每個請求。 ~~如果是這樣，那麼您應該在開發中的每個頁面加載服務器的GET請求列表.log~~

來源

2016-11-26 21:09:13 adass

JQuery不工作 - rails

回答

相關問題