Jquery append（）停止添加

Question

这是我的小提琴。 https://jsfiddle.net/ryuchix/o6dkbhfw/3/

选择“VIDEO”时，显示文件输入和文本区域。单击Addmore时，应添加另一个textarea。

问题出现在第二个附加div＃container并选择视频，它不再添加textarea。

HTML     

  <div id="container">
    <input type="text" name="itemname" id="itemname">
    <select name="type" class="type">
      <option value="text">text</option>
      <option value="video">video</option>
      <option value="image">image</option>
      <option value="file">file</option>
    </select><br>
    <div id="div-content">
      <textarea name="content" class="content"></textarea>
      <input type="file" name="file" class="file" style="display: none">
      <input type="file" name="file" class="image" style="display: none">
      <input type="file" name="file" class="video" style="display: none">
      <div id="div-prompt" style="display: none">
        <textarea name="prompt" class="prompt"></textarea>
        <a href="#" class="addprompt">add more</a>
      </div>
    </div>
  </div>
  <a href="#" id="addmore">add more</a>
  <input type="submit" name="submit">
</form>

https://jsfiddle.net/ryuchix/o6dkbhfw/3/

Answer 1

因为你动态创建它我认为你想要这个

  $('#container').on('click', '.addprompt', function (e) {
    $(this).parent('div').append('<div id="div-prompt"><textarea name="prompt" class="prompt"></textarea><a href="#" id="removeprompt">remove</a></div>');

  })

在

下面运行代码段

＆＃13;

＆＃13;

// A $( document ).ready() block.
$( document ).ready(function(e) {
  select(); 
  var html = '<hr><div id="container"><input type="text" name="itemname" id="itemname"><select name="type" class="type"><option value="text">text</option><option value="video">video</option><option value="image">image</option><option value="file">file</option></select><br><div id="div-content"><textarea name="content" class="content"></textarea><input type="file" name="file" class="file" style="display: none"><input type="file" name="file" class="image" style="display: none"><input type="file" name="file" class="video" style="display: none"><div id="div-prompt" style="display: none"><textarea name="prompt" class="prompt"></textarea><a href="#" class="addprompt">add more</a></div></div><a href="#" id="remove">remove</a></div>';

  $('#addmore').click(function(e) {
    $('#container').append(html);
    select(); 
  })
  
  

  $('#container').on('click', '#remove', function (e) {
    $(this).parent('div').remove();
  })

  $('#div-prompt').on('click', '#removeprompt', function (e) {
    $(this).parent('div').remove();
  })
  
 

  $('#container').on('click', '.addprompt', function (e) {
    $(this).parent('div').append('<div id="div-prompt"><textarea name="prompt" class="prompt"></textarea><a href="#" id="removeprompt">remove</a></div>');
   
  })

});

function select() {
  $('.type').bind('change', function(event) {

    var i = $(this).val();


    if(i=="video"){ 
      $(this).siblings('#div-content').find('.content').hide();
      $(this).siblings('#div-content').find('.file').hide();
      $(this).siblings('#div-content').find('.image').hide();
      $(this).siblings('#div-content').find('.video').show();
      $(this).siblings('#div-content').find('#div-prompt').show();
    }
     else if(i=="image"){
      $(this).siblings('#div-content').find('.content').hide();
      $(this).siblings('#div-content').find('.file').hide();
      $(this).siblings('#div-content').find('.image').show();
      $(this).siblings('#div-content').find('.video').hide();
      $(this).siblings('#div-content').find('#div-prompt').hide();
    }else if(i=="file"){
      $(this).siblings('#div-content').find('.content').hide();
      $(this).siblings('#div-content').find('.file').show();
      $(this).siblings('#div-content').find('.image').hide();
      $(this).siblings('#div-content').find('.video').hide();
      $(this).siblings('#div-content').find('#div-prompt').hide();
    } else if(i=="text"){
      $(this).siblings('#div-content').find('.content').show();
      $(this).siblings('#div-content').find('.file').hide();
      $(this).siblings('#div-content').find('.image').hide();
      $(this).siblings('#div-content').find('.video').hide();
      $(this).siblings('#div-content').find('#div-prompt').hide();
    }

  });
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="margin: 0 auto; width: 50%">

  <div id="container">
    <input type="text" name="itemname" id="itemname">
    <select name="type" class="type">
      <option value="text">text</option>
      <option value="video">video</option>
      <option value="image">image</option>
      <option value="file">file</option>
    </select><br>
    <div id="div-content">
      <textarea name="content" class="content"></textarea>
      <input type="file" name="file" class="file" style="display: none">
      <input type="file" name="file" class="image" style="display: none">
      <input type="file" name="file" class="video" style="display: none">
      <div id="div-prompt" style="display: none">
        <textarea name="prompt" class="prompt"></textarea>
        <a href="#" class="addprompt">add more</a>
      </div>
    </div>
  </div>
  <a href="#" id="addmore">add more</a>
  <input type="submit" name="submit">
</form>

＆＃13;

＆＃13;

＆＃13;