使用jQuery將對象插入DOM時設置正確的選擇器

Question

我目前正在構建一個動態表單，允許用戶根據需要添加儘可能多的查詢字符串。

在這我必須插入一些邏輯，從選項下拉控件評估選定的操作符。如果用戶選擇Between值，那麼我需要在當前行中插入第二個字段，以便有兩個文本輸入字段（又名To和From）。我現在掙扎的地方在於選擇插入到DOM中的元素。我是jQuery的新手，我認爲我理解選擇器，但我仍然錯過了一些東西。

代碼我迄今

$(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 
       }); 

更新安德魯

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

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> 

根據建議，我看到了另一個奇怪的事情是，一旦我創建了一個排前一行似乎鬆散了綁定到點擊事件。即如果我有三行第1行和第3行會觸發，但第2行不會，就好像.live（）方法只能在最後一行創建的行上一樣。

難道在這裏使用錯誤的方法？我嘗試使用.on（），但那永遠不會觸發任何東西。

我真的很想知道如何讓選擇控件正確觸發並返回正確的選定值，以及是否有任何暗示最好的建議來將控件重新插入插入事件時進入DOM。

謝謝你，

工作液 感謝Andrew你爲我在正確的軌道上。這個問題與在DOM中不使用唯一標識符以及我的jQuery選擇器關閉有關。感謝安德魯斯的建議，我能夠得到解決方案的工作。下面是正確的代碼：

$(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屬性必須在DOM獨特的，這就是爲什麼所有的呼叫都出現異常行爲，通過添加類，你的聽衆使用的每個元素和組相似的元素一個唯一的ID將成爲，

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