gpt4 book ai didi

jquery - 使用 $this 进行选择

转载 作者:行者123 更新时间:2023-12-01 06:36:47 26 4
gpt4 key购买 nike

我试图让各个选择(与其他选择具有相同的类)响应 .change 函数,但它仅适用于其中一个选择。如果你测试一下这段代码,它会更有意义。尝试添加一些“ON/OFF事件”,然后在各个选择中选择“指定时间”。您只会看到第一个响应。有什么想法吗?

谢谢!

请看下面的代码:

$(document).ready(function() {
var neweventstring = '<div class="event">Turns <select name="ONOFF"><option value="On">ON</option><option value="Off">OFF</option></select> at: <select name="setto" class="setto"><option>Select Time</option><option value="Sunrise">Sunrise</option><option value="Sunset">Sunset</option><option value="specifiedtime">Specified Time</option></select></div>';

$('#addmondaysevent').click(function () {
$('#monday .events').append(neweventstring);
});

$('.setto').change(function() {
alert('The function is called');
if($("option:selected", this).val() =="specifiedtime"){
alert('If returns true');
$(this).css("background-color", "#cc0000");
$(this).after('<div class="specifictime"><input type="text" value="00" style="width:30px"/> : <input type="text" value="00" style="width:30px"> <select name="ampm"><option value="AM" selected>AM</option><option value="PM">PM</option></select></div>')
}
});
});

还有我的 HTML:

<div id="monday">
<h2>Mondays</h2>

<div class="events">
<div class="event">
Turn
<select name="ONOFF">
<option value="On">ON</option>
<option value="Off">OFF</option>
</select>
at:
<select name="setto" class="setto">
<option>Select Time</option>
<option value="Sunrise">Sunrise</option>
<option value="Sunset">Sunset</option>
<option value="specifiedtime">Specified Time</option>
</select>
</div>
[<a id="addmondaysevent">Add an ON/OFF event</a>]
</div>
</div>

最佳答案

更改事件处理程序仅添加一次(在文档准备就绪时)。您应该使用 $.delegate 或 $.on 将事件附加到稍后添加到页面的元素。例如,类似以下内容应该有效:

$(document).ready(function() {
var neweventstring = '<div class="event">Turns <select name="ONOFF"><option value="On">ON</option><option value="Off">OFF</option></select> at: <select name="setto" class="setto"><option>Select Time</option><option value="Sunrise">Sunrise</option><option value="Sunset">Sunset</option><option value="specifiedtime">Specified Time</option></select></div>';

$('#addmondaysevent').click(function () {
$('#monday .events').append(neweventstring);
});

$('#monday .events').on("change", ".setto", function() {
alert('The function is called');
if($("option:selected", this).val() =="specifiedtime"){
alert('If returns true');
$(this).css("background-color", "#cc0000");
$(this).after('<div class="specifictime"><input type="text" value="00" style="width:30px"/> : <input type="text" value="00" style="width:30px"> <select name="ampm"><option value="AM" selected>AM</option><option value="PM">PM</option></select></div>')
}
});
});

关于jquery - 使用 $this 进行选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13216146/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com