我有以下代码：
$("select.form-control").change(function () {
alert($(this).val());
});
在我的DOM中，我需要处理可变数量的select标记，但我似乎无法使用上述函数访问它们的值（在本例中为其值）。知道为什么这不起作用吗？
编辑：
应该触发事件的代码段：
<div class="box box-solid ship-grid">
<div class="box-header with-border">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3 class="box-title">Victory II-Class Star Destroyer</h3>
<input type="hidden" value="2" name="ship-id-0" id="ship-id-0">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3 class="box-title points-counter GreenBold"><span class="point-counter" id="point-counter-0">85</span> points
<i class="fa fa-times delete-from-grid" title="Delete this ship" onclick="deleteShipGrid(this)"></i></h3>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<img src="images/ships/empire/victory-II.png" class="ship-grid-image amd-center-img">
</div>
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs12">
<span class="control-label" style="margin-top: 10px"><img src="images/icons/officer.png" class="grid-upgrade-icon"> Select an Officer</span>
<select name="officer-0" id="officer-0" class="form-control" style="margin-top: 10px">
<option value="0">No officer</option><option class="tooltip-upgrade-12" value="12">[ +3 ] Director Isard •</option><option class="tooltip-upgrade-13" value="13">[ +3 ] Defense Liason </option><option class="tooltip-upgrade-14" value="14">[ +3 ] Weapons Liason </option><option class="tooltip-upgrade-15" value="15">[ +3 ] Veteran Captain </option><option class="tooltip-upgrade-11" value="11">[ +7 ] Wulff Yularen •</option><option class="tooltip-upgrade-10" value="10">[ +10 ] Admiral Chiraneau •</option>
</select>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs12">
<span class="control-label" style="margin-top: 10px"><img src="images/icons/weapons.png" class="grid-upgrade-icon"> Select a Weapons Team</span>
<select name="weapons-team-0" id="weapons-team-0" class="form-control" style="margin-top: 10px">
<option value="0">No weapons team</option><option class="tooltip-upgrade-17" value="17">[ +5 ] Sensor Team </option><option class="tooltip-upgrade-18" value="18">[ +6 ] Flight Controllers </option><option class="tooltip-upgrade-16" value="16">[ +7 ] Gunnery Team </option>
</select>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs12">
<span class="control-label" style="margin-top: 10px"><img src="images/icons/off.png" class="grid-upgrade-icon"> Select an Offensive Retrofit</span>
<select name="offensive-retro-0" id="offensive-retro-0" class="form-control" style="margin-top: 10px">
<option value="0">No offensive retrofit</option><option class="tooltip-upgrade-46" value="46">[ +5 ] Expanded Hangar Bay </option><option class="tooltip-upgrade-47" value="47">[ +5 ] Point-Defense Reroute </option>
</select>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs12">
<span class="control-label" style="margin-top: 10px"><img src="images/icons/turbo.png" class="grid-upgrade-icon"> Select Turbolasers</span>
<select name="turbolasers-0" id="turbolasers-0" class="form-control" style="margin-top: 10px">
<option value="0">No turbolasers</option><option class="tooltip-upgrade-36" value="36">[ +5 ] XX-9 Turbolasers </option><option class="tooltip-upgrade-38" value="38">[ +6 ] X-17 Turbolasers </option><option class="tooltip-upgrade-35" value="35">[ +8 ] H9 Turbolasers </option><option class="tooltip-upgrade-37" value="37">[ +10 ] Enhanced Armament </option>
</select>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs12">
<span class="control-label" style="margin-top: 10px"><img src="images/icons/ion.png" class="grid-upgrade-icon"> Select Ion Cannons</span>
<select name="ions-0" id="ions-0" class="form-control" style="margin-top: 10px">
<option value="0">No ion cannons</option><option class="tooltip-upgrade-39" value="39">[ +4 ] Leading Shots </option><option class="tooltip-upgrade-40" value="40">[ +5 ] Ion Cannon Batteries </option><option class="tooltip-upgrade-41" value="41">[ +8 ] Overload Pulse </option>
</select>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs12">
<span class="control-label" style="margin-top: 10px"><img src="images/icons/title.png" class="grid-upgrade-icon"> Select a vessel title</span>
<select name="tilte-0" id="title-0" class="form-control" style="margin-top: 10px">
<option value="0">No title</option><option class="tooltip-upgrade-32" value="32">[ +8 ] Warlord •</option><option class="tooltip-upgrade-33" value="33">[ +5 ] Corrupter •</option><option class="tooltip-upgrade-34" value="34">[ +12 ] Dominator •</option>
</select>
</div>
<div class="checkbox col-md-12" style="margin-top: 20px;">
<label>
<input type="checkbox" name="flagship-0" id="flagship-0"> Use this ship as flagship
</label>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
想象一下，我有多个这样的框，我需要一个独特的函数来获取每个选择值以及它们的名称属性。
Javascript代码的很大一部分如下：
$(document).ready(function () {
$("#grid").css("height", $("#selector").css("height"));
<?php if($faction_char == 'e'){ ?>
$("#li-fge").addClass("active");
<? }else{ ?>
$("#li-fgr").addClass("active");
<? } ?>
var ship_counter = 0;
var squadron_counter = 0;
// List object to be populated on submit
var list = new Object();
var ship_array = new Array();
var squadron_array = new Array();
$('.boostrap-slider').slider();
$('#points-slider').slider().on('slide', function (ev) {
setTotalPoints();
});
$('#total-points').bind("DOMSubtreeModified", function () {
checkPoints();
});
$('#current-points').bind("DOMSubtreeModified", function () {
checkPoints();
});
$(".ship-selector").click(function () {
var ship_id = $(this).attr("ship-id");
var vessel = $(this).attr("vessel");
// Ship object initialization
var ship_object = new Object();
ship_object.builder_id = 0;
ship_object.list_id = 0;
ship_object.ship_id = 0;
ship_object.officer_id = 0;
ship_object.weapons_team_1_id = 0;
ship_object.support_team_1_id = 0;
ship_object.offensive_retrofit_1_id = 0;
ship_object.defensive_retrofit_1_id = 0;
ship_object.ordnance_1_id = 0;
ship_object.turbolasers_1_id = 0;
ship_object.ion_cannons_1_id = 0;
ship_object.weapons_team_2_id = 0;
ship_object.support_team_2_id = 0;
ship_object.offensive_retrofit_2_id = 0;
ship_object.defensive_retrofit_2_id = 0;
ship_object.ordnance_2_id = 0;
ship_object.turbolasers_2_id = 0;
ship_object.ion_cannons_2_id = 0;
$.ajax
({
type: "POST",
url: "server/get_ship.php",
data: {
'id': ship_id,
'vessel': vessel,
'counter': ship_counter
},
cache: false,
success: function (data) {
$("#ship-grid").append(data);
ship_object.builder_id = ship_counter;
ship_object.ship_id = parseInt($("#ship-id-" + ship_counter.toString()).val());
ship_array.push(ship_object);
ship_counter++;
},
error: function () {
alert("AJAX error.");
}
});
});
$("select.form-control").change(function () {
alert($(this).val());
});
$("#objective_1").change(function () {
$.ajax
({
type: "POST",
url: "server/get_objective.php",
data: {
'id': $("#objective_1").val()
},
cache: false,
success: function (data) {
var domData = $.parseJSON(data);
$("#obj-1-img").attr("src","images/objectives/" + domData["rows"][0]["cell"][7]);
},
error: function () {
alert("AJAX error.");
}
});
});
答案 0 :(得分：4)
你提到ajax加载。使用委托事件处理程序，附加到不变的祖先元素（例如document）：
e.g。添加这个
$(function(){
$(document).on('change',"select.form-control", function () {
alert($(this).val());
});
});
JSFiddle： http://jsfiddle.net/3p1rtjb0/1/
委托事件通过监听事件来起泡到祖先。然后它将选择器仅应用于气泡链中的元素（因此非常有效）。然后它会在导致事件的任何匹配元素上调用该函数。
结果是元素只需要在事件时间匹配（而不是在事件被注册时）。
注意：我最后发现了一个与样式相关的错误，这意味着附加到body的委托鼠标事件不会触发（如果计算出的身高为0）。出于这个原因，我建议你总是使用document作为委托事件处理程序的默认值（如果没有其他更接近/方便）。