Question

我正在尝试获取单个选择（与其他选择具有相同的类）以响应.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>

Answer 1

更改事件处理程序仅添加一次（在文档就绪时）。您应该使用$ .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>')
        }
    });
});

Answer 2

你只是把它应用到一个。只有一个select已经应用了setto类，这是你正在绑定的。

$(document).on('theEvent','theSelector', function () {
    DoKungfu();
});

是你的朋友。这会将事件绑定到当前与选择器匹配的DOM中的任何项目以及稍后添加的与其匹配的任何项目。

Answer 3

与Yatrix一样，您的第一个选择缺少 class =“setto”。考虑到这一点，您还必须绑定更改事件。

$('#monday .event').on('change', '.setto', function() {

Answer 4

尝试更改此顺序，“选项：已选择”...

if($(this,"option:selected").val() == "specifiedtime") {

 ... do stuff ...

更新 @Yatrixs建议解决了持久性错误。

Answer 5

在追加后再次尝试绑定事件：

$('#monday .events').append(neweventstring);

jquery - 使用$ this定位选择

5 个答案: