如何使克隆的元素更改其关联的（克隆）亲戚

Question

首先，对不起，我的英语不好。我会尽力解释清楚。

我有一个动态表，可以通过使用clone()函数来添加其行。在行内，有一个<select>，它触发对“ Respond”列的更改。

我试图弄清楚如何制作.clone()行以仅更改其各自的“响应”列。

当前状态是，每当我对克隆的行进行更改时，它将更改其前身（实际）行。

我已阅读其中一则here

，以供参考。

这是我当前的代码：https://jsfiddle.net/joo_nath/fr5utycL/

Answer 1

同一元素id不能有多个元素，这是您的问题。如果您使用类来附加单击事件，那么您会没事的。

您还需要帮助代码将其操作限制在具有该类的元素上，但仅限于该行中。我已将每个复制的UI组件的id更改为class，并且在单击select

时还添加了以下几行

$(this).closest("tr").find(".responder").text("Emakk!!");

代码说明

• $(this)从被单击的元素开始
• .closest("tr")在DOM树中向上移动，直到找到第一个tr元素
• .find(".responder")搜索当前元素（现在是最接近的tr）的DOM树子元素，以查找任何类别为.responder的元素
• .text("Emakk!!")更改与当前选择匹配的任何元素的文本

---

演示

	$(document).ready(function() {
	  $(".addItPlease").on("click", function(e) {
	    e.preventDefault();

	    var clone = $(this).closest("#bodyTab");
	    cloned.clone(true).insertAfter(clone);
	  });

	  $(".switch").change(function() {
	    $(this).each(function() {
	      if ($(this).children("option:selected").val() == 1) {
	        $(this).closest("tr").find(".responder").text("Babeh!!");
	      } else if ($(this).children("option:selected").val() == 2) {
	        $(this).closest("tr").find(".responder").text("Emakk!!");
	      }
	    });
	  });
	  var cloned = $("#bodyTab").clone(true, true);
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container p-5 m-5">
  <table class="table table-light table-striped table-hover" id="iniTable">
    <thead>
      <tr>
        <th>Choice</th>
        <th>Respond</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="bodyTab">
      <tr>
        <td id="selector">
          <select class="switch">
						<option value="1">Bapak</option>
						<option value="2">Ibu</option>
						<option value="3">Abang</option>
					</select>
        </td>
        <td class="responder">dsad</td>
        <td id="smh">
          <a class="btn btn-success p-3 text-white addItPlease" href="#" id="">Tambah</a></td>
      </tr>
    </tbody>
  </table>
</div>