jQueryを使用してオブジェクトをDOMに挿入するときに正しいセレクタを設定する

Question

私は現在、ユーザーが望むだけ多くのクエリ文字列を追加できる動的フォームを構築しています。

ここでは、オプションのドロップダウンコントロールから選択した演算子を評価するロジックを挿入する必要があります。ユーザーがBetween値を選択した場合、2つのテキスト入力フィールド（別名ToとFrom）が存在するように、現在の行に2番目のフィールドを挿入する必要があります。私が今苦労しているのは、DOMに挿入されている要素を選択することです。私はjQueryが新しく、セレクタを理解していると思っていましたが、まだ何か不足しています。

コード私はこれまで私が作成した後、私は見ていますもう一つの奇妙な事があるのhtml

<div id="queryFields"> 
      <select name="condition"> 
       <option value="AND">AND</option> 
       <option value="OR">OR</option> 
      </select> 
      <input type="text" name="fieldname" id="fieldName" size="20" /> 
      <select name="operator"> 
       <option id="opt1" value="CONTAINS">Contains</option> 
       <option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option> 
       <option id="opt3" value="LIKE">Like</option> 
       <option id="opt4" value="BETWEEN">Between</option> 
      </select> 
      <input type="text" name="fieldValue1" id="fieldvalue1" value="" size="20" /> 
      <input type="button" id="add" value="Add" /> 
     </div> 

$('select').live('change', '.operClass', function() { 
      var foo2 = $('.operClass option:selected').val(); 
      alert(foo2); 
     }); 
      }); 

アンドリュー

からの提案に基づいて

$(document).ready(function() { 
       var index = 0; 
       $('#add').click(function() { 
        InsertFields(); 
       }); 
       function InsertFields() { 
        index++; 
        $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'><option id='opt1' value='contains'>Contains</option><option id='opt2' value='does not contain'>Does Not Contain</option><option id='opt3' value='like'>Like</option><option id='opt4' value='between'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields'); 
       } 
    //used live on the second buttons to rebind the function once the element was added. 
        $('#newAdd').live('click', function() { 
         index++; 
        $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator'><option id='opt1' value='contains'>Contains</option><option id='opt2' value='does not contain'>Does Not Contain</option><option id='opt3' value='like'>Like</option><option id='opt4' value='between'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields'); 
       }); 

       $('#btnRemove').live('click', function() { 
        $(this).parent().remove(); 
       }); 
    //first select if performed on first row works fine 
       $('select[name=operator]').change(function() { 
        var foo = $('select[name=operator] option:selected').val(); 
        alert(foo); //test to see if I can reach the value 
       }); 

更新を持っています前の行がバインディングを緩めるように見える行クリックイベント。つまり、私は3行を持っている場合、1と3の行は起動しますが、2行目は起動しません.live（）メソッドは作成された最後の行でのみ動作します。

ここでは.liveを使用する方法が間違っていますか？私は.on（）を使ってみましたが、何もトリガしません。

私は実際には、選択されたコントロールを適切に起動して正しい選択値を返す方法と、挿入時にイベントにコントロールを再バインドする最良のappraochにsuggetionsがあるかどうかについて、 DOMに挿入します。

は、右のトラックに私を取得するためのアンドリューに

作業溶液 感謝をありがとうございました。この問題は、DOM内で一意の識別子を使用しないことに関連し、jQueryセレクタがオフになっていたことに関連していました。 Andrewsの提案のおかげで、私は解決策を働かせることができました。以下は正しいコードです：id属性は、DOM内で一意である必要があり

$(document).ready(function() { 
      var index = 0; 
      $('#add').click(function() { 
       InsertFields(); 
      }); 
      function InsertFields() { 
       index++; 
       $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields'); 
      } 
      $('#newAdd').live('click', function() { 
       index++; 
       $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator' class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields'); 
      }); 

      $('#btnRemove').live('click', function() { 
       $(this).parent().remove(); 
      }); 

      $('.operClass').change(function() { 
       var foo = $('.operClass option:selected').val(); 
       alert(foo); //test to see if I can reach the value 
      }); 

      $('select').live('change', '.operClass', function() { 
       var foo2 = $(this, '.operClass option:selected').val(); 
       alert(foo2); 
      }); 
     }); 

Answer 1

は、すべての呼び出しが、妙に動作し、あなたのリスナーをクラスを追加することにより、要素などの各要素とグループの一意のIDを使用している理由、それはあります

$(document).on('click', '.classOfElement', function(){...});