JS和jQuery事件侦听器在页面加载时不起作用

时间:2018-07-27 02:46:18

标签: javascript jquery ruby-on-rails-5 jquery-rails

我正在尝试向一些按钮添加一些简单的事件侦听器。我正在运行Rails 5.2.0,并使用jQuery rails gem。根据文档,我将gem添加到我的gemfile中,捆绑安装,并在application.js中要求它。如果将我的js文件中的事件侦听器复制到控制台,则它们可以正常工作,但是刷新页面后,它们不会对元素生效。

编辑:现在,从gem加载jQuery时,我也遇到$ is not defined错误。但是,我尝试通过其他方式(CDN和本地资产)加载jQuery,尽管我并不总是获得$ is not a function error,但事件监听器仍然没有应用。

Application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

// Require jQuery from gem
//= require jquery

Listing.js

$("#gym").click(function(e){ alert('hi')});

Gemfile.lock

GEM
  remote: https://rubygems.org/
  specs:
    actioncable (5.2.0)
      actionpack (= 5.2.0)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
    actionmailer (5.2.0)
      actionpack (= 5.2.0)
      actionview (= 5.2.0)
      activejob (= 5.2.0)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
    actionpack (5.2.0)
      actionview (= 5.2.0)
      activesupport (= 5.2.0)
      rack (~> 2.0)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.2)
    actionview (5.2.0)
      activesupport (= 5.2.0)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.3)
    activejob (5.2.0)
      activesupport (= 5.2.0)
      globalid (>= 0.3.6)
    activemodel (5.2.0)
      activesupport (= 5.2.0)
    activerecord (5.2.0)
      activemodel (= 5.2.0)
      activesupport (= 5.2.0)
      arel (>= 9.0)
    activestorage (5.2.0)
      actionpack (= 5.2.0)
      activerecord (= 5.2.0)
      marcel (~> 0.3.1)
    activesupport (5.2.0)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 0.7, < 2)
      minitest (~> 5.1)
      tzinfo (~> 1.1)
    addressable (2.5.2)
      public_suffix (>= 2.0.2, < 4.0)
    archive-zip (0.11.0)
      io-like (~> 0.3.0)
    arel (9.0.0)
    bcrypt (3.1.12)
    bindex (0.5.0)
    bootsnap (1.3.1)
      msgpack (~> 1.0)
    builder (3.2.3)
    byebug (10.0.2)
    capybara (3.4.2)
      addressable
      mini_mime (>= 0.1.3)
      nokogiri (~> 1.8)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      xpath (~> 3.1)
    childprocess (0.9.0)
      ffi (~> 1.0, >= 1.0.11)
    chromedriver-helper (1.2.0)
      archive-zip (~> 0.10)
      nokogiri (~> 1.8)
    clearance (1.16.1)
      bcrypt
      email_validator (~> 1.4)
      rails (>= 3.1)
    coffee-rails (4.2.2)
      coffee-script (>= 2.2.0)
      railties (>= 4.0.0)
    coffee-script (2.4.1)
      coffee-script-source
      execjs
    coffee-script-source (1.12.2)
    concurrent-ruby (1.0.5)
    crass (1.0.4)
    email_validator (1.6.0)
      activemodel
    erubi (1.7.1)
    execjs (2.7.0)
    faraday (0.12.2)
      multipart-post (>= 1.2, < 3)
    ffi (1.9.25)
    figaro (1.1.1)
      thor (~> 0.14)
    globalid (0.4.1)
      activesupport (>= 4.2.0)
    hashie (3.5.7)
    i18n (1.0.1)
      concurrent-ruby (~> 1.0)
    io-like (0.3.0)
    jbuilder (2.7.0)
      activesupport (>= 4.2.0)
      multi_json (>= 1.2)
    jquery-rails (4.3.3)
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
    jwt (1.5.6)
    listen (3.1.5)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
      ruby_dep (~> 1.2)
    loofah (2.2.2)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.7.0)
      mini_mime (>= 0.1.1)
    marcel (0.3.2)
      mimemagic (~> 0.3.2)
    method_source (0.9.0)
    mimemagic (0.3.2)
    mini_mime (1.0.0)
    mini_portile2 (2.3.0)
    minitest (5.11.3)
    msgpack (1.2.4)
    multi_json (1.13.1)
    multi_xml (0.6.0)
    multipart-post (2.0.0)
    nio4r (2.3.1)
    nokogiri (1.8.4)
      mini_portile2 (~> 2.3.0)
    oauth2 (1.4.0)
      faraday (>= 0.8, < 0.13)
      jwt (~> 1.0)
      multi_json (~> 1.3)
      multi_xml (~> 0.5)
      rack (>= 1.2, < 3)
    omniauth (1.8.1)
      hashie (>= 3.4.6, < 3.6.0)
      rack (>= 1.6.2, < 3)
    omniauth-google-oauth2 (0.5.3)
      jwt (>= 1.5)
      omniauth (>= 1.1.1)
      omniauth-oauth2 (>= 1.5)
    omniauth-oauth2 (1.5.0)
      oauth2 (~> 1.1)
      omniauth (~> 1.2)
    pg (1.0.0)
    public_suffix (3.0.2)
    puma (3.12.0)
    rack (2.0.5)
    rack-test (1.1.0)
      rack (>= 1.0, < 3)
    rails (5.2.0)
      actioncable (= 5.2.0)
      actionmailer (= 5.2.0)
      actionpack (= 5.2.0)
      actionview (= 5.2.0)
      activejob (= 5.2.0)
      activemodel (= 5.2.0)
      activerecord (= 5.2.0)
      activestorage (= 5.2.0)
      activesupport (= 5.2.0)
      bundler (>= 1.3.0)
      railties (= 5.2.0)
      sprockets-rails (>= 2.0.0)
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
    rails-html-sanitizer (1.0.4)
      loofah (~> 2.2, >= 2.2.2)
    railties (5.2.0)
      actionpack (= 5.2.0)
      activesupport (= 5.2.0)
      method_source
      rake (>= 0.8.7)
      thor (>= 0.18.1, < 2.0)
    rake (12.3.1)
    rb-fsevent (0.10.3)
    rb-inotify (0.9.10)
      ffi (>= 0.5.0, < 2)
    ruby_dep (1.5.0)
    rubyzip (1.2.1)
    sass (3.5.7)
      sass-listen (~> 4.0.0)
    sass-listen (4.0.0)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    sass-rails (5.0.7)
      railties (>= 4.0.0, < 6)
      sass (~> 3.1)
      sprockets (>= 2.8, < 4.0)
      sprockets-rails (>= 2.0, < 4.0)
      tilt (>= 1.1, < 3)
    selenium-webdriver (3.13.1)
      childprocess (~> 0.5)
      rubyzip (~> 1.2)
    spring (2.0.2)
      activesupport (>= 4.2)
    spring-watcher-listen (2.0.1)
      listen (>= 2.7, < 4.0)
      spring (>= 1.2, < 3.0)
    sprockets (3.7.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-rails (3.2.1)
      actionpack (>= 4.0)
      activesupport (>= 4.0)
      sprockets (>= 3.0.0)
    thor (0.20.0)
    thread_safe (0.3.6)
    tilt (2.0.8)
    turbolinks (5.1.1)
      turbolinks-source (~> 5.1)
    turbolinks-source (5.1.0)
    tzinfo (1.2.5)
      thread_safe (~> 0.1)
    uglifier (4.1.16)
      execjs (>= 0.3.0, < 3)
    web-console (3.6.2)
      actionview (>= 5.0)
      activemodel (>= 5.0)
      bindex (>= 0.4.0)
      railties (>= 5.0)
    websocket-driver (0.7.0)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.3)
    xpath (3.1.0)
      nokogiri (~> 1.8)

PLATFORMS
  ruby

DEPENDENCIES
  bootsnap (>= 1.1.0)
  byebug
  capybara (>= 2.15, < 4.0)
  chromedriver-helper
  clearance
  coffee-rails (~> 4.2)
  figaro
  jbuilder (~> 2.5)
  jquery-rails
  listen (>= 3.0.5, < 3.2)
  omniauth
  omniauth-google-oauth2
  pg (>= 0.18, < 2.0)
  puma (~> 3.11)
  rails (~> 5.2.0)
  sass-rails (~> 5.0)
  selenium-webdriver
  spring
  spring-watcher-listen (~> 2.0.0)
  turbolinks (~> 5)
  tzinfo-data
  uglifier (>= 1.3.0)
  web-console (>= 3.3.0)

RUBY VERSION
   ruby 2.5.1p57

BUNDLED WITH
   1.16.2

2 个答案:

答案 0 :(得分:2)

也许加载文档时需要绑定“ click”,就像这样:

$(document).ready(function(){
   $("#gym").click(function(e){ alert('hi')});
})

答案 1 :(得分:2)

我更喜欢.on而不是.click,因为以前的工作是动态添加元素。

编辑:评论中出现疑问

$("body").on( "click","#gym",function() {
  console.log( $( this ).text() );
});

如果到达JS时您的元素不存在,则仍然可以使用。或用作其他答案文档。就绪