[英]jQuery change event doesn't fire on specified selector
我有以下代碼:
$("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.");
}
});
});
您提到ajax加載。 使用附加到不變的祖先元素(例如document
)的委托事件處理程序:
例如添加這個
$(function(){
$(document).on('change',"select.form-control", function () {
alert($(this).val());
});
});
JSFiddle: http : //jsfiddle.net/3p1rtjb0/1/
委派的事件通過監聽事件傳到祖先來起作用。 然后,它將選擇器僅應用於氣泡鏈中的元素(因此非常有效)。 然后,它在導致事件的所有匹配元素上調用該函數。
結果是這些元素僅需要在事件發生時進行匹配(而不是在事件注冊時進行匹配)。
注意:我上次發現的是與樣式相關的錯誤,這意味着與body
關聯的委托鼠標事件不會觸發(如果計算出的主體高度為0)。 因此,我建議您始終使用document
作為委托事件處理程序的默認document
(如果沒有其他更方便的方法)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.