jquery clone只有文本而不是属性不起作用

Question

我正在研究jquery clone.我有div和三个元素的地方.第一个元素是选择下拉,第二个是文本框,第三个是添加按钮.当用户单击添加按钮时,它完全克隆整个div.但是,如果用户从下拉值中选择,则需要启用其他最接近的文本框,这是第一次正常工作.如果用户单击"添加"按钮,则文本框应处于禁用模式,因为用户尚未从下拉字段中选择另一个.

这是我的jquery代码

$(document).ready(function() {
  $("#btn_add").click(function() {
    $("#duplicate").clone(true).insertAfter("#duplicate");
  });
  $("#txt_select").change(function() {
    if ($(this).find("option:selected").val() == "Other") {
      $("#sel_ipt").find("#sel_ipt").removeAttr("disabled").val('');
    } else {
      $("#sel_ipt").attr("disabled", "disabled");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div id="duplicate">
  <select id="txt_select">
    <option>Select</option>
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
    <option value="Other">Other</option>
  </select>
  <input type="text" disabled id="sel_ipt" />
  <input type="submit" id="btn_add" value="Add" />
</div>

请指导我

这是我的JSBIN 链接

Answer 1

首先,因为你是复制,不要使用id,而是使用class.

我更改了您的功能并添加了注释,以便您了解该功能的工作原理.

$( function(){
  $(".btn_add").click(function(){
    // clone the first .duplicate
    var clone = $(".duplicate:first").clone(true);
    // find the text input, change the disabled property and empty the value
    clone.find(".sel_ipt").attr("disabled","disabled").val('');
    // insert after the last .dublicate
    clone.insertAfter(".duplicate:last");
  });
  $(".txt_select").change(function () {
    if ($(this).find("option:selected").val() == "Other") {
      // use next to find the next element with class .sel_ipt
      $(this).next(".sel_ipt").removeAttr("disabled").val('');
    } else {
      $(this).next(".sel_ipt").attr("disabled","disabled");
    }
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="duplicate">
  <select class="txt_select">
    <option>Select</option>
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
    <option value="Other">Other</option>
  </select>
  <input type="text" disabled class="sel_ipt" />
  <input type="submit" class="btn_add" value="Add" />
</div>