1

.change関数に応答するために（他のselectと同じクラスを持つ）個々のselectを取得しようとしていますが、それはselectの1つでのみ機能します。このコードをテストすると、より意味があります。いくつかの「ON/OFFイベント」を追加してから、さまざまな選択で「指定された時間」を選択してください。最初の1つだけが応答するのがわかります。何か案は？

ありがとう！

次のコードを参照してください。

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

5 に答える 5

4

変更イベント ハンドラーは 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>')
        }
    });
});
于 2012-11-04T04:55:39.213 に答える
1

この「option：selected」の順序を変更してみてください...

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

 ... do stuff ...

UPDATE @Yatrixsの提案により、永続性エラーが解決されました。

于 2012-11-04T05:07:31.817 に答える
1

あなたはそれを1つだけに適用しています。settoクラスが適用されているのは 1 つの選択だけです。これは、バインドしていることです。

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

あなたの友達です。これにより、現在セレクターに一致する DOM 内の任意のアイテムと、後で追加されたセレクターに一致する任意のアイテムにイベントがバインドされます。

于 2012-11-04T04:54:37.733 に答える
1

Yatrixが言ったように、最初の選択にはclass="setto"がありません。そのことを念頭に置いて、変更イベントをそのようにバインドする必要もあります。

$('#monday .event').on('change', '.setto', function() {
于 2012-11-04T04:57:51.727 に答える
-1

追加した後、バインドイベントを再試行してください。 

$('#monday .events').append(neweventstring);
于 2012-11-04T04:52:47.670 に答える