个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一些非常非常基本的 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/
25
4
0
出现在 python 2.7.8 中。 3.4.1 不会发生这种情况。 示例: >>> id(id) 140117478913736 >>> id(id) 140117478913736 >>> id
好吧，我对动态创建的控件的 ID 很困惑。 Public Class TestClass Inherits Panel Implements INamingContainer
我收到下面的错误，说有堆栈溢出。发生这种情况是因为带有 IN (id, id, id...id) 的 SQL 语句有大量参数。有没有什么办法解决这一问题？这是在我使用 Eclipse 的本地环境中发生
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
为什么 CPython(对其他 Python 实现一无所知)有以下行为？ tuple1 = () tuple2 = ()
非常简单的问题:当我有一个持久对象时，它通常有一个名为 ID 的属性(对于抽象类)。 那么..命名约定是ID还是Id？ 例如。 public int ID { get; set; } 或 public
知道为什么我会收到此错误，我已经尝试了所有命名约定(小写/大写) 我正在使用 Vaadin，这是我的代码片段: public class Usercontainer extends BeanI
为什么 CPython(不知道其他 Python 实现)有以下行为？ tuple1 = () tuple2 = ()
我需要改变表的所有主键 UPDATE TODO SET id = id + 1 但我做不到(Demo 来自 Ahmad Al-Mutawa 的回答)描述了原因。主键不能这样改。 我也不能根据这是 sq
我正在尝试列出与用户相关的讨论列表。 想象一下，如果你愿意的话: posts -------------------------------------------------------------
我有一个表，其中包含一些具有自己的 ID 和共享 SKU key 的文章。我尝试使用左连接进行查询，并使用组结果获取从查询返回的所有 id。 我的数据结构是这样的: id - name -
在下表People中: id name 1 James 2 Yun 3 Ethan 如果我想找到最大 ID，我可以运行此查询 select max(id) id from People; 结果是
我正在产品页面上创建评论模块，其中显示垃圾评论选项，并显示 onclick 显示和隐藏弹出窗口。现在它在单个评论中工作正常但是当评论是两个时它同时打开两个因为类是相同的。现在这就是为什么我想要获取父
根据 REST 哲学，PUT操作应该(取自维基百科): PUT http://example.com/resources/142 Update the address member of the co
我想知道如何在使用 PHP 或 JavaScript 进行身份验证后从 Google Analytics 获取 Property Id、View Id 和 Account Id？因为我希望能够将它们存
我想使用所选按钮的 ID 进行删除。但我不知道如何从中获取/获取 id。我尝试了 this.id 但不起作用。 这是我创建按钮的地方: var deleteEmployer= document.cre
我有一个具有以下结构的表“表” ID LinkedWith 12 13 13 12 14 13 15 14 16
请不要在未阅读问题的情况下将问题标记为重复。我确实发布了一个类似的问题，但 STACKOVERFLOW 社区成员要求我单独重新发布修改后的问题，因为考虑到一个小而微妙的修改，解决方案要复杂得多。 假设
在 Android Studio 中，我创建了一个 Person.java 类。我使用Generate 创建了getter 和setter 以及构造函数。 这是我的 Person.java 类: pu
如何在 jQuery 中制作这样的东西: //这是显示的主体 ID //当我悬停 #hover-id 时，我希望 #principal-id 消失并更改 。但是当我将光标放在 #this-id 上时
我是一名优秀的程序员,十分优秀！