为了您的帮助,我发现问题与JavaScript无关,而是在Ruby上。
我正在添加 application.html.erb
其他JS文件,如果您有 //= require_tree
在 application.js
它添加了树中的每个JS文件,因此在上添加JS文件 application.html.erb
将使他们重复并引起这样的奇怪行为。
题
我正在设计一个多动态的精选菜单,即,我有一个用于品牌的菜单,在用户选择品牌,使用JavaScript和Ajax之后,我将搜索该品牌可用的型号,并将它们添加到第二选择菜单中。此过程再次重复,但是这次显示了所选模型的功能。
为此,由于我有许多需要相同系统的不同领域,因此我在每个品牌选择菜单中使用具有相同名称的类,而每个型号选择菜单则使用另一个名称。
<div class='brand_select' id='14'>
<%= f.collection_select :brand, Product.find_all_by_area(14, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
</div>
<div class='model_select'>
<%= f.collection_select :model, Product.find_all_by_area(14), :model, :model, :prompt => 'Choose model' %>
</div>
<div class='brand_select' id='15'>
<%= f.collection_select :brand, Product.find_all_by_area(15, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
</div>
<div class='model_select'>
<%= f.collection_select :model, Product.find_all_by_area(15), :model, :model, :prompt => 'Choose model' %>
</div>
和Javacript:
$('.brand_select').change(function(event) {
// option selected
var brand=$(event.target).find('option:selected').val();
// if none is selected
if (brand == ''){
$(event.target).parent().parent().find('.modelo_select').hide();
$(event.target).parent().parent().find('.caracteristica').hide();
}
else {
$(event.target).parent().parent().find('.modelo_select').show();
// find id to search on the database
var id=$(event.target).parent().attr('id');
// find the target (id of the object)
var target=$(event.target).attr('id');
$.ajax({
type: "POST",
url: "http://"+location.host+"/model/"+brand+"/"+id+"/"+target,
brand: brand,
id: id,
target: target
});
}
});
$('.model_select').change(function(event) {
// find model selected to search on the database
var model=$(event.target).find('option:selected').val();
// find brand selected to search on the database
var brand=$(event.target).parent().parent().find('.marca_select').find('option:selected').val();
// find id to search on the database
var id=$(event.target).parent().parent().find('.marca_select').attr('id');
// find the target (id of the object)
var target=$(event.target).attr('id');
$.ajax({
type: "POST",
url: "http://"+location.host+"/feature/"+brand+"/"+model+"/"+id+"/"+target,
brand: brand,
model: model,
id: id,
target: target
});
});
该代码有效,但它重复事件更改与该名称的类相同的次数。
我要做的是使该功能每次都只能为课程调用一个更改事件一次。
我不知道这是否可以使用我的类结构,或者我必须将每个区域的不同名称的ID或类与该功能相关联。
解决方案 2
为了您的帮助,我发现问题与JavaScript无关,而是在Ruby上。
我正在添加 application.html.erb
其他JS文件,如果您有 //= require_tree
在 application.js
它添加了树中的每个JS文件,因此在上添加JS文件 application.html.erb
将使他们重复并引起这样的奇怪行为。
其他提示
我不明白为什么该事件应该两次开火,因为您要使用$(选择器)。改变说,每次更改事件都会与您要处理的选择器一起发射。我什至进行了快速测试以确保它不会发射不止一次。
您能更好地解释什么症状是什么?就像在一样,实际发生了两次?您活动中的所有处理程序是否发生了两次?
我以为您对父母所做的动作的选择可能太松懈($(event.target).parent()。父母()。被解雇了这不是最好的方法(但是我又一次不知道您的最终目的是什么)。