無法根據使用jQuery

/*Add new div(content)*/ 
<div class="form-group"> 
<button type="button" class="btn-primary btn-sm" id="add-phone">Add</button> 
</div> 

<script type='text/javascript'> 
var max_fields = 3; //maximum input boxes allowed 
var x = 1; //initlal text box count 

    $('#add-phone').click(function() { 
     if(x < max_fields){ //max input box allowed 
      x++; //increment when a new div(section) is added. 
     //content of added section(div) 
     $("#add-request").after('<div class="col-md-12" id="site-phone"> 
     <select name='phone-manufacture' id="phone-manufacture"> 
     <option value="apple">Apple</option><option value="sam">Samsung</option></select></div>'); 
    }); 

$(document).ready(function() { 
    $('#phone-manufacture').change(
     function() { 
      var method = $('option:selected').val(); 
      if (this.value == 'apple'){ 
       //show different content(Fields, text or another select) 
      }else if(this.value == 'sam'){ 
       //show something else or append a new element.. 
      } 
     }); 
    }); 

</script>

這是我迄今爲止添加方法動態地顯示不同的內容，但增加的第一個div（按Add按鈕一次），但加入了第二個div（內容時，當它只能 - 第二次按下添加按鈕）或第三個div（內容）不再顯示If塊上指定的不同元素。無法根據使用jQuery

來源

2017-02-26 user1533578

這個問題不是很清楚，你可以進一步解釋你喜歡做什麼嗎？ – Greeso

我想每次按下添加按鈕都會添加一個新的div。一旦新的div顯示，它會顯示選擇選項wh用戶可以選擇選項1或2.基於選擇，然後將顯示文本字段..我已經完成了..問題是，當用戶再次單擊添加按鈕..動態文本字段不顯示。 – user1533578

您正在創建具有相同ID的新元素。每個元素都應該有一個唯一的ID。你應該爲你的改變功能使用一個類引用，而不是一個ID引用（參見下面的示例，我已經添加了一個名爲phone-manufacture的類，並將它用於你的更改函數）。另外，請注意我已經使用$(document).on 。變化的功能。這是因爲，當你動態地添加的元素，你需要將事件處理程序附加到非動態元素：

<script type='text/javascript'> 

$(document).ready(function() { 
var max_fields = 3; //maximum input boxes allowed 
var x = 1; //initlal text box count 

$('#add-phone').click(function() { 
    if(x < max_fields){ //max input box allowed 
     x++; //increment when a new div(section) is added. 
     //content of added section(div) 
     $("#add-request").after('<div class="col-md-12" id="site-phone"><select name="phone-manufacture" id="phone-manufacture" class="phone-manufacture"> <option value="apple">Apple</option><option value="sam">Samsung</option></select></div>'); 
    } 
}); 



    $(document).on('change','.phone-manufacture', function(){ 
      var method = $('option:selected').val(); 
      if (this.value == 'apple'){ 
       //show different content(Fields, text or another select) 
      }else if(this.value == 'sam'){ 
       //show something else or append a new element.. 
      } 
     }); 
}); 

</script>

注：我沒有在這個改變你的ID，但你也應該解決這個問題

來源

2017-02-26 20:37:47

無法根據使用jQuery

回答

相關問題