我有一些非常非常基本的 jQuery，它使用 $()运算符通过 #id 查找元素。
下面是模拟功能，与我的 DOM 中的 HTML 完全相同:
https://jsfiddle.net/ebbnormal/h4ccgajn/
但是，在以下 HAML/JS 的上下文中，它会崩溃，即使我知道 1) jQuery 已加载并正在工作 2) 我的 .js 文件包含在我的 application.js list 文件中 3) 我的 . Node.js 包含在 <head> 中console.log 所在页面的应该打印，但没有。
这是我的观点:
.front-page-calculator
.calc-text
Estimate your program cost.
.calc-form
=form_tag(controller: "school_applications", action: "calculate_price", method: "get", class: "calc_form") do
=select_tag "start_date", options_for_select(['February 9, 2015', 'April 6, 2015', 'May 4, 2015', 'June 1, 2015', 'June 29, 2015', 'July 27, 2015', 'August 25, 2015', 'September 21, 2015', 'October 19, 2015', 'November 16, 2015', 'December 14, 2015' ])
-@option_array = (2..52).each.map {|i| ["#{i} weeks", i]}
-@option_array = @option_array.unshift(["1 week", 1])
= select_tag(:duration,options_for_select(@option_array))
= select_tag(:fls_center,options_for_select( FlsCenter.all.map{|p| [p.name, p.id]}))
= select_tag "housing_type", "<option></option>".html_safe, include_blank:true
= select_tag "program", "<option></option>".html_safe, include_blank:true
=submit_tag "Calculate Price"
这是我的.js文件 ( welcome.js )
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}
//using the function:
jQuery(document).ready(function(){
$(".calc-form form #fls_center").change(function(){
console.log("we are in a changed calc form");
var center_id = document.getElementById(".calc-form fls_center").value;
var formdata = {center: center_id};
$.ajax({
url: "/application/get_programs_for_center",
type: "POST",
datatype: 'json',
data: formdata,
success: function(response){
var options = $(".calc-form program");
removeOptions(options);
$.each(response.programs, function(i,item) {
options.append($("<option />").val(response.programs[i].id).text(response.programs[i].name));
});
}
});
var center_id = document.getElementById("school_application_fls_center").value;
var formdata = {center: center_id};
$.ajax({
url: "/application/get_airports_for_center",
type: "POST",
datatype: 'json',
data: formdata,
success: function(response){
var options = $("#school_application_arrival_airport");
removeOptions(document.getElementById("school_application_arrival_airport"));
$.each(response.airports, function(i,item) {
options.append($("<option />").val(response.airports[i].id).text(response.airports[i].name));
});
options.append($("<option />").val('-1').text('None'));
}
});
});
这是我的application.js文件:
//= require jquery
//= require jquery_ujs
//= require_tree .
这是 <head>我生成的 View
<head>
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/jquery-ui/core.js?body=1"></script>
<script src="/assets/jquery-ui/datepicker.js?body=1"></script>
<script src="/assets/jquery-ui/widget.js?body=1"></script>
<script src="/assets/jquery-ui/button.js?body=1"></script>
<script src="/assets/jquery-ui/mouse.js?body=1"></script>
<script src="/assets/jquery-ui/draggable.js?body=1"></script>
<script src="/assets/jquery-ui/position.js?body=1"></script>
<script src="/assets/jquery-ui/resizable.js?body=1"></script>
<script src="/assets/jquery-ui/dialog.js?body=1"></script>
<script src="/assets/jquery-ui/sortable.js?body=1"></script>
<script src="/assets/jquery-ui/tabs.js?body=1"></script>
<script src="/assets/active_admin/base.js?body=1"></script>
<script src="/assets/active_admin/lib/batch_actions.js?body=1"></script>
<script src="/assets/active_admin/lib/checkbox-toggler.js?body=1"></script>
<script src="/assets/active_admin/lib/dropdown-menu.js?body=1"></script>
<script src="/assets/active_admin/lib/flash.js?body=1"></script>
<script src="/assets/active_admin/lib/has_many.js?body=1"></script>
<script src="/assets/active_admin/lib/modal_dialog.js?body=1"></script>
<script src="/assets/active_admin/lib/per_page.js?body=1"></script>
<script src="/assets/active_admin/lib/popover.js?body=1"></script>
<script src="/assets/active_admin/lib/table-checkbox-toggler.js?body=1"> </script>
<script src="/assets/active_admin/ext/jquery-ui.js?body=1"></script>
<script src="/assets/active_admin/ext/jquery.js?body=1"></script>
<script src="/assets/active_admin/application.js?body=1"></script>
<script src="/assets/active_admin.js?body=1"></script>
<script src="/assets/application_payment.js?body=1"></script>
<script src="/assets/bootstrap.min.js?body=1"></script>
<script src="/assets/locations.js?body=1"></script>
<script src="/assets/school_application.js?body=1"></script>
<script src="/assets/welcome.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
</head>
尽管如此，它仍然没有看到我的 console.log声明。
注意
因为我怀疑我的 jQuery 上下文是否设置正确，所以我添加了 $()运算符到 .js正确检测 <select> 变化的文件标签。当我输入:
$(".calc-form form #fls_center").change(function(){
console.log("we are in a changed calc form");
});
里面jQuery(document).ready(function(){})
即使当我复制并粘贴时它仍然不起作用
$(".calc-form 表单#fls_center")
在我的 chrome 浏览器的 JS 控制台中，它成功选择了 <select>标签。
最佳答案
删除所有 JavaScript，只留下
jQuery(document).ready(function(){
$(".calc-form form #fls_center").change(function(){
console.log("we are in a changed calc form");
});
});
确保它正确触发，然后逐段添加回您的 js 代码。
我认为您的代码中可能存在一些错误，导致此功能无法正常工作。例如，var center_id = document.getElementById(".calc-form fls_center").value; 无效。
关于javascript - jQuery:简单的 $() 选择 #id 在 RoR 上下文中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28843404/