創建jQuery元素不在jQuery風格

Question

我是所有JavaScript和jQuery-Stuff的新手。請原諒我的編碼或我骯髒的風格的任何愚蠢的錯誤。我很高興您的經驗豐富的一方提供所有建設性的反饋意見。

我嘗試動態添加一些jQuery元素，就像一些新的選擇菜單一樣。在我的例子中，用戶應該決定他想要定製的車輛數量，並基於此我想爲每輛選定的車輛創建一個新的選擇菜單。

我得到它的工作，如果用戶選擇「2車」jQuery將添加兩個新的選擇菜單。但我的問題是，這些菜單不再在jQuery-Style中。

我在這裏做錯了什麼？根據汽車的選擇數量，是否可以在「for-loop」中添加新的菜單？

這裏是我的代碼：

<script type="text/javascript"> 

    $('#select-choice-1').live("change", function(event, ui) { 
     var valuee = $(this).val(); 

     if (valuee == '2') ($('<label for="select-choice-2" class="select">Color of car #1</label>' + 
              '<select name="select-choice-2" id="select-choice-2">'+ 
              '<option value="red">red</option>'+ 
              '<option value="blue">blue</option>'+ 
              '</select><br><br>' + 
           '<label for="select-choice-3" class="select">Color of car #2</label>' + 
              '<select name="select-choice-3" id="select-choice-3">'+ 
              '<option value="green">green</option>'+ 
              '<option value="yellow">yellow</option>'+ 
              '</select>').appendTo('#site')); 
     if (valuee == '3') ($('<h1>Test</h1>').appendTo('#site')); 

    }); 
    </script> 

這裏是html頁面：

<div id="site" data-role="fieldcontain">  

    <label for="select-choice-1" class="select">Number of cars</label> 
    <select name="select-choice-1" id="select-choice-1"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 


    </div><!-- "site" --> 

Answer 1

 $('#site').delegate("#select-choice-1", "change", function(event, ui) { 
      var valuee = $(this).val(); 
      var constructhtml = ''; 
      if (valuee == '2') { 
       constructhtml +='<label for="select-choice-2" class="select">Color of car #1</label>' + '<select name="select-choice-2" id="select-choice-2">'+ '<option value="red">red</option>'+ '<option value="blue">blue</option>'+ '</select><br><br>' + '<label for="select-choice-3" class="select">Color of car #2</label>' + '<select name="select-choice-3" id="select-choice-3">'+ '<option value="green">green</option>'+ '<option value="yellow">yellow</option>'+ '</select>'; 
      }else if (valuee == '3') { 
       constructhtml +='<h1>Test</h1>'; 
      } 
    $('#site').append(constructhtml); 
    }); 

OP的需要創建一個動態添加選擇菜單

將這個檔位已到thwe頁面最下方

<div id="selectcontainer"></div> 

$(document).ready(function(){ 

var str = ''; 
str+='<select>'; 
    for(i=1;i<=10;i++){ 
    str+='<option value='"+i+"'>'"+i+"'</option>'; 

    } 
str+='</select>'; 
$('#selectcontainer').html(str); 
});