jquery-使用$this以选择为目标

我试图获得与其他选择具有相同类的单个选择，以响应.change函数，但它仅对其中一个选择有效。如果您测试这段代码，它将更有意义。尝试添加一些开/关事件，然后在各种选择中选择指定的时间。您将只看到第一个响应。有什么想法吗

谢谢

请参阅以下代码：

$(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>

---

附加以下内容后，请再次尝试绑定事件：

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

---

附加以下内容后，请再次尝试绑定事件：

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

---

你只把它应用于一个。只有一个select应用了setto类，这就是绑定所做的

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

---

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

您仅将其应用于一个。只有一个select应用了setto类，这就是绑定所做的

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

---

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

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

---

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

---

正如Yatrix所说，您的第一个选择是缺少class=setto。考虑到这一点，您还必须将更改事件本身绑定起来

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

---

正如Yatrix所说，您的第一个选择是缺少class=setto。考虑到这一点，您还必须将更改事件本身绑定起来

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

---

尝试更改此选项的顺序：已选定

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

 ... do stuff ...     

---

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

尝试更改此选项的顺序，选项：已选择

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

 ... do stuff ...     

---

---

UPDATE@Yatrixs suggestion解决了持久性错误。

这不是答案，是comments。这不是答案，是comments。恐怕不行。上面的代码对你有用吗？你测试过了吗？我在休假。感谢+1的建议。这是一个非常好的方法。。。很好的解脱。生活：-一定要选出有用的答案，并接受最好的答案，@Maureen。我恐怕这不起作用。上面的代码对你有用吗？你测试过了吗？我在休假。感谢+1的建议。这是一个非常好的方法。。。很好地摆脱了。live:-一定要投票选出有用的答案，并接受最好的答案，@Maureen。最初只有一个，但我使用了.append来添加更多。是的，但是当您绑定更改事件时，只有一个。setto present。Yatrix是正确的，只是不太详细啊。。好了，我现在开始明白了。谢谢Yatrix和Andbdrew。我很好奇为什么我也被否决了。我不知道社区现在惩罚那些回答正确的人。我必须记住这一点。作为记录，如果你调用doKungFu，你的浏览器会踢你的脸。最初只有一个，但我使用.append来添加更多。是的，但是当你绑定更改事件时，只有一个.setto present。Yatrix是正确的，只是不太详细啊。。好了，我现在开始明白了。谢谢Yatrix和Andbdrew。我很好奇为什么我也被否决了。我不知道社区现在惩罚那些回答正确的人。我必须记住这一点。作为记录，如果你叫doKungFu，你的浏览器会踢你的脸。这就成功了。我使用了上面Andbdrew的代码，只是按照您在这里的建议将.delegate改为.on。谢谢这就成功了。我使用了上面Andbdrew的代码，只是按照您在这里的建议将.delegate改为.on。谢谢如果您选择Andbdrew的解决方案，请考虑将他的解决方案标记为：-点，而无意义的HAR，是网站的一个有趣部分。另外，Rp越高，我们得到的鸡就越多。如果你选择Andbdrew的解决方案，请考虑将他的解决方案标记为：-点，而无意义的HAR，是网站的有趣部分。另外，代表率越高，我们得到的小鸡就越多。