我正在使用内部的on change事件克隆div。 当我克隆div时，只有原始div中的脚本有效。
我如何为脚本赋予与克隆的脚本相同的ID。
<div class="clone_div" style="margin-top: 16px;text-align: right">
<div class="card w-75">
<div class="card-header">
<h5 class="mb-0">
<button type="button" style="width: 1000px;text-decoration: none;" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="row">
<div class="col-sm text-right">
<span id="std_name">הרשמה</span>
</div>
<div class="col-sm">
<p id="price">ש"ח 000</p>
</div>
</div>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<form method="post" id="check_std" novalidate="novalidate">
<div class="row">
<div class="col-sm ">
<input type="text" class="form-control" value="<?= $p_id ?>" name="p_id" placeholder="מספר ת.ז. *">
</div>
<div class="col-sm ">
<input type="date" class="datepicker form-control" value="<?= $b_day ?>" name="b_day" placeholder="תאריך לידה*">
</div>
</div>
<input type="hidden" name="search" value="search">
</form>
<div class="row mt-5 mr-1">
<span class="mr-3">רישום <input type="radio" class="checkbox gn" name="gender" value="boy"> בן <input type="radio" name="gender" class="checkbox gn" value="girl"> בת </span>
<div class="row col-md-12">
<div class="col-sm">
<input type="text" class="form-control " value="<?= $row['std_name'] ?>" placeholder="שם*">
</div>
<div class="col-sm">
<input type="text" class="form-control " value="" aria-describedby="emailHelp" placeholder="שם משפחה*">
</div>
</div>
<div class="row col-md-12 mt-2 ">
<div class="col-sm">
<select class="form-control ">
<option selected disabled>מוסד הלימודים*</option>
<option value="אהלי תורה">אהלי תורה </option>
<option value="תלמוד תורה">תלמוד תורה </option>
<option value="בית רבקה צעירות">בית רבקה צעירות </option>
<option value="בית רבקה בוגרות">בית רבקה בוגרות </option>
<option value="גן">גן </option>
<option value="אחר">אחר </option>
</select>
</div>
<div class="col-sm">
<input type="text" class="form-control " value="" aria-describedby="emailHelp" placeholder="שם המורה*">
</div>
</div>
<div class="row col-md-12 mt-2 ">
<div class="col-sm">
<select class="form-control ">
<option selected disabled>מידת חולצה*</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
</select>
</div>
<div class="col-sm">
<select class="form-control">
<option selected disabled> מסיימת כיתה/גן*</option>
<option value="גן ראשון">גן ראשון</option>
<option value="גן תת חובה">גן תת חובה</option>
<option value="גן חובה">גן חובה</option>
<option value="כיתה א">כיתה א</option>
<option value="כיתה ב">כיתה ב</option>
<option value="כיתה ג">כיתה ג</option>
<option value="כיתה ג">כיתה ג</option>
<option value="כיתה ד">כיתה ד</option>
<option value="כיתה ה">כיתה ה</option>
<option value="כיתה ו">כיתה ו</option>
<option value="כיתה ז">כיתה ז</option>
<option value="כיתה ח">כיתה ח</option>
<option value="כיתה ט">כיתה ט</option>
<option value="כיתה י">כיתה י</option>
<option value="כיתה יא">כיתה יא</option>
<option value="כיתה יב">כיתה יב</option>
</select>
</div>
</div>
<div class="row col-md-7 mt-2 ">
<div class="col-sm">
<select class="form-control" id="k_type" style="width: 355px">
<option selected disabled> סוג קייטנה*</option>
<option value="קייטנת ילדי הגנים" data-price="280">קייטנת ילדי הגנים</option>
<option value="קעמפ (מסיימות ה- ח)" data-price="350">קעמפ (מסיימות ה- ח)</option>
<option value="קעמפ (מסיימות א- ד)" data-price="280">קעמפ (מסיימות א- ד)</option>
</select>
</div>
</div>
<div class="row col-md-7 mt-2 " style="width: 313px">
<div class="col-sm">
<select class="form-control boy" style="display: none;width: 355px">
<option selected disabled> מידת כיפה*</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="row col-md-12 mt-lg-5 ">
<div class="col-sm">
<input type="checkbox" value="health"> הצהרת בריאות
</div>
</div>
<hr>
<div class="row col-md-12">
<div class="col-lg-12 mb-3">
<h4>פרטי האב</h4>
</div>
<div class="col-sm">
<input type="text" class="form-control " value="<?= $row['std_f_name'] ?>" placeholder="שם האב*">
</div>
<div class="col-sm">
<input type="text" class="form-control " value="" placeholder="ת.ז. האב*">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-sm">
<input type="email" class="form-control " value="" placeholder="מייל האב*">
</div>
<div class="col-sm">
<input type="text" class="form-control " value="<?= $row['std_f_phone'] ?>" placeholder="נייד האב*">
</div>
</div>
<div class="row col-md-12 mt-3">
<div class="col-lg-12 mb-3">
<h4>פרטי האם</h4>
</div>
<div class="col-sm">
<input type="text" class="form-control " value="<?= $row['std_m_name'] ?>" placeholder="שם האב*">
</div>
<div class="col-sm">
<input type="text" class="form-control " value="" placeholder="ת.ז. האם*">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-sm">
<input type="email" class="form-control " value="" placeholder="מייל האם*">
</div>
<div class="col-sm">
<input type="text" class="form-control " value="<?= $row['std_m_phone'] ?>" placeholder="נייד האם*">
</div>
</div>
<div class="row col-md-12 mt-2">
<div class="col-sm">
<button type="button" class="btn btn-danger btn-sm mr-3 mt-3 remove" id="clone">מחק</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.checkbox').on('click', function() {
if ($(this).val() == 'boy') {
$('.boy').show();
} else {
$('.boy').hide();
}
})
$("#k_type").change(function(e) {
var name = $('#k_type option:selected').attr('data-price');
$('#std_name').text(name);
e.preventDefault();
});
</script>
</div>
这是克隆div的脚本
$(document).ready(function() {
var cloneCount = 1;
$("#clone").click(function() {
cloneCount++
var clone = $('.clone_div')
.clone();
clone.attr('class', 'clone_div' + cloneCount)
clone.find("#collapseOne").attr("id", "collapseOne" + cloneCount);
clone.find("#k_type").attr("id", "k_type" + cloneCount);
clone.find("button").attr("data-target", "#collapseOne" + cloneCount);
clone.find("span").attr("id", "std_name" + cloneCount);
clone.find("p").attr("id", "price" + cloneCount);
clone.find("input:text").val("");
clone.appendTo(".result");
});
});
此行为每个select标签赋予新的ID
clone.find("#k_type").attr("id","k_type" + cloneCount);
如何为该脚本提供与克隆的脚本相同的ID？
$("#k_type").change(function(e) {
var name = $('#k_type option:selected').attr('data-price');
$('#std_name').text(name);
e.preventDefault();
});
答案 0 :(得分：2)
您可以创建一个与所有以k_type开头的ID匹配的选择器：
$("[id^=k_type]").change(function(e) {
var name = $(this).find('option:selected').attr('data-price');
$('#std_name').text(name);
e.preventDefault();
});
Attribute Starts With Selector [name^="value"]
由于我们是动态添加元素（在克隆上），因此我们需要将事件change附加到父元素，然后选择要应用事件处理程序的子元素：
// we need to apply this event to an element that exists on the initial page
// .on('change', 'children selector', callback)
$("div.result").on('change', '[id^=k_type]', function(e) {
// prevent the default behavior
e.preventDefault();
// save the <select> element
var $select = $(this);
// find the option selected and it's data-price attribute
var name = $select.find('option:selected').attr('data-price');
// get the closest parent that has a class starting with clone_div
var $parent = $select.closest('div[class^=clone_div]');
// within the parent, find the span that has an id starting with std_name
var $spanName = $parent.find('span[id^=std_name]');
// set the text to the span
$spanName.text(name);
});