Jquery似乎并没有找到Simple_form中的DOM元素

Question

我正在尝试使用jQuery，以便根据单击哪个单选按钮显示不同的部分或表单。我使用JSFiddle来首先处理一个普通的香草形式，而且都很好，但是当我将相同的代码逻辑应用到使用simple_form gem的rails应用程序时，似乎没有任何工作。

见我下面

$("input[type=radio]").click(function(){ 
    if ($('input[name=usertype]:checked').val() == "User A") { 
     $("#one").slideDown("fast"); 
     $("#two").slideUp("fast"); 
     $("#three").slideUp("fast"); 
     $("#four").slideUp("fast"); 
    } 
    if ($('input[name=usertype]:checked').val() == "User B") { 
     $("#two").slideDown("fast"); 
     $("#one").slideUp("fast"); 
     $("#three").slideUp("fast"); 
     $("#four").slideUp("fast"); 
    } 
    if ($('input[name=usertype]:checked').val() == "User B") { 
     $("#three").slideDown("fast"); 
     $("#two").slideUp("fast"); 
     $("#one").slideUp("fast"); 
     $("#four").slideUp("fast"); 
    } 
    if ($('input[name=usertype]:checked').val() == "User B") { 
     $("#four").slideDown("fast"); 
     $("#three").slideUp("fast"); 
     $("#two").slideUp("fast"); 
     $("#one").slideUp("fast"); 
    } 
}); 

    <%= simple_form_for(resource, :as => resource_name, :html => { :class => 'form-horizontal' }, :url => registration_path(resource_name)) do |f| %> 
    <%= f.input :email, placeholder: 'example@domain.com' %> 
    <%= f.input :username %> 
    <%= f.input :usertype, label: 'Which best describes you', :input_html => {:name => "usertype"}, :collection => ["User A", "User B", "User C", "User D"], 
       as: :radio_buttons %> 
    <ul id="one"> 
     <li><%= f.input :dob, label: 'Date of Birth', as: :date, start_year: Date.today.year - 90, 
        end_year: Date.today.year - 16, 
        order: [:day, :month, :year] %></li> 
    </ul> 
    <ul id="two"> 
     <li><%= f.input :launchedIn, label: 'Year club launched', as: :date, start_year: Date.today.year - 300, 
        end_year: Date.today.year, discard_day: true, discard_month: true, order: [:year] %></li> 
    </ul> 
    <ul id="three"> 
     <li><%= f.input :category, :collection => ["Football", "Golf", "Tennis", "Rugby"], prompt: 'Choose an Sport' %> 
    </ul></li> 
    <ul id="four"> 
     <li><%= f.input :bio, label: 'Tell us about you', hint: 'Maximum 300 characters' %></li> 
    </ul> 
    <%= f.input :password %> 
    <%= f.input :password_confirmation %> 
    <div><%= f.submit "Register", :class => 'btn btn-primary' %></div> 
<% end %> 

代码是否配备了至少四个版本的jsfiddle的这项工作，但是没有我的Rails应用程序工作。

将不胜感激任何帮助，因为我的压力球只能拿这么多:-)

非常感谢

基兰

Answer 1

假设你使用的Rails 3.2或更新版本，...尝试：

1. 检查应用程序生成的JS是否正确（它包含你的代码）（html页面的源代码）
2. 在申请之前，您是否有机会运行rake assets:precompile？ Rails可能会提取你的application.js的预编译版本。如果是这样尝试rake assets:clean
3. 确保您的jQuery是，你有你的JS文件/ CoffeeScript的逻辑
4. 加载之前请确保您在您的JS使用$(document).ready ->正在处理以下

Answer 2

它看起来像你的脚本是不是在DOM已准备就绪。 DOM中添加您的剧本写好了，它应该工作

jQuery(function($){ 
    $("input[type=radio]").click(function(){ 
     var val = $('input[name=usertype]:checked').val(); 
     if (val == "User A") { 
      $("#one").slideDown("fast"); 
      $("#two").slideUp("fast"); 
      $("#three").slideUp("fast"); 
      $("#four").slideUp("fast"); 
     } else if (val == "User B") { 
      $("#two").slideDown("fast"); 
      $("#one").slideUp("fast"); 
      $("#three").slideUp("fast"); 
      $("#four").slideUp("fast"); 
     } else if (val == "User B") { 
      $("#three").slideDown("fast"); 
      $("#two").slideUp("fast"); 
      $("#one").slideUp("fast"); 
      $("#four").slideUp("fast"); 
     } else if (val == "User B") { 
      $("#four").slideDown("fast"); 
      $("#three").slideUp("fast"); 
      $("#two").slideUp("fast"); 
      $("#one").slideUp("fast"); 
     } 
    }); 
}); 

您也可以尝试像

jQuery(function($) { 
    var usertypes = $('input[name=usertype]'), uis = $('#one, #two, #three, #four'), valueMap = { 
     "User A" : $('#one'), 
     "User B" : $('#two'), 
     "User C" : $('#three'), 
     "User D" : $('#four') 
    }; 
    $("input[type=radio]").click(function() { 
     var val = usertypes.filter(':checked').val(), ui = valueMap[val]; 
     uis.not(ui).slideUp("fast"); 
     ui.slideDown("fast"); 
    }); 
}); 

演示：Fiddle