我正在克隆一些表单元素，将它们包装在一个包含div中。“关闭”按钮是第一次使用，但不适用于其他克隆的表单部分。
//克隆代码
function newObservation() {
var len = $('.observation').length;
var titleLen = $('.observation').length + 2;
var $html = $('.observationTemplate').clone();
$('.observationTitle:eq(0)').text("Observation - " + titleLen);
$html.find('[name=audit-observation-category]')[0].name = "audit-observation-category" + len;
$html.find('[name=audit-observation-notes]')[0].name = "audit-observation-notes" + len;
$html.find('[name=audit-observation-recommendation]')[0].name = "audit-observation-recommendation" + len;
$html.find('[name=audit-observation-severity]')[0].name = "audit-observation-severity" + len;
$html.find('[name=audit-observation-person]')[0].name = "audit-observation-person" + len;
$html.find('[name=audit-observation-date]')[0].name = "audit-observation-date" + len;
return $html.html();
}
$(document).on('pageinit', function () {
$('<div/>', {
'class': 'observation',
html: newObservation()
}).appendTo('#auditContainer');
$('#auditObservationButton').click(function () {
$('<div/>', {
'class': 'observation',
html: newObservation()
}).hide().appendTo('#auditContainer').slideDown('slow');
});
$('.observation').on('click', '.close', function () {
$(this).closest('.observation').fadeOut();
});
});
// HTML
<div class="observationTemplate">
<h4 class="observationTitle">Observation - 1</h4>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true" data-theme="b" class="close">close</a>
<div data-role="fieldcontain">
<label for="audit-observation-category" class="ui-hidden-accessible select">Observation Category</label>
<select name="audit-observation-category" id="audit-observation-category" data-theme="e" data-corners="false">
<option value="" selected>Observation Category</option>
<option value="Site">Site</option>
<option value="Incident">Incident</option>
<option value="NearMiss">Near Miss</option>
</select>
</div>
<div data-role="fieldcontain">
<label class="ui-hidden-accessible" for="audit-observation-notes">Notes</label>
<textarea cols="40" rows="8" name="audit-observation-notes" id="audit-observation-notes" class="notes" placeholder="Notes" maxlength="140"></textarea>
</div>
<div data-role="fieldcontain">
<label class="ui-hidden-accessible" for="audit-observation-recommendation">Recommendation</label>
<textarea cols="40" rows="8" name="audit-observation-recommendation" id="audit-observation-recommendation" class="notes" placeholder="Recommendation" maxlength="140"></textarea>
</div>
<!-- not working for some reason -->
<div data-role="fieldcontain">
<label for="audit-observation-severity" data-theme="e">Severity</label>
</div>
<div data-role="fieldcontain">
<input type="range" name="audit-observation-severity" id="audit-observation-severity" value="15" min="15" max="180" step="15" data-hilight="true" data-theme="d">
</div>
<div data-role="fieldcontain">
<label for="audit-observation-person" class="ui-hidden-accessible select">Observation Person</label>
<select name="audit-observation-person" id="audit-observation-person" data-theme="e" data-corners="false">
<option value="" selected>Observation Person</option>
<option value="Jim">Jim</option>
<option value="Bob">Bob</option>
<option value="Gary">Gary</option>
</select>
</div>
<div data-role="fieldcontain">
<label class="ui-hidden-accessible" for="audit-observation-date">Date</label>
<input type="date" name="audit-observation-date" id="audit-observation-date" placeholder="Date" value="">
</div>
</div><!--/observation-->
<div id="auditContainer"></div>
<div data-role="controlgroup" data-type="horizontal" data-theme="d">
<a href="#" id="auditObservationButton" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="b">Add Observation</a>
</div>
它不绑定到随后创建的表单部分。有任何想法吗？
事件处理程序仅绑定到当前选定的元素；在您的代码调用.on（）时，它们必须存在于页面上。为确保元素存在并可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入到页面中，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。
因此，您应该调用on包含所有.observation元素的元素。在这种情况下，您原始观察的父项将起作用。
$('#auditContainer').on('click', '.close', function(){
//your code here
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句