特尔;博士:
我使用$(..).append(node)
,但不考虑包含新添加的节点,尽管它们(据说)匹配 jQuery 选择器。
问题
我下面有一些使用复选框但模拟单选按钮行为的代码。换句话说,任何时候都只能(有效地)选择一个复选框。不应选择多于一项。
如果您运行下面的示例并单击前 3 个复选框,它们的行为将类似于单选按钮。无论您单击多少,都只会选择一个。
但是,如果您添加点,则不会为 JS 考虑新添加的点,即使理论上它也应该抓住它们......
具体:可以选中新添加的复选框,它会在之前已经选中的复选框之外被选中。这是不正确的,因为在任何时候都应该只选择 1 个,而所有其他的都应该取消选择。
发生了什么以及如何将新添加的节点包含到 jQuery 选择器中?
$(function() {
//check first box
$("input.duty:first").prop("checked", true);
//clicking unchecked box should check that box
//unchecks all others
$(".duty").on('click', function(event) {
$("input.duty").prop("checked", false);
$(this).prop("checked", true);
});
$("#addCasePoint").on("click", function() {
var newRowIndex = $('#newRowIndex').text();
var template = $('#casePointTemplate').data('template');
template = template.replace(/__index__/g, newRowIndex);
$('#casePointsFieldset').append(template);
$('#newRowIndex').text(++newRowIndex);
return false;
});
//deletes case point
$("#selection").on("click", ".removeCase", function() {
var caseCount = $('#selection .casePointFieldset').length
if (caseCount === 1) return false; //keep at least one row
$(this).closest("fieldset").remove();
return false;
});
});
.casePointFieldset {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="selection">
<fieldset id="casePointsFieldset">
<legend>Case Points</legend>
<div id="pointFieldset">
<fieldset class="casePointFieldset">
<div>
<label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
</div>
<button class="removeCase">Remove</button>
</fieldset>
<fieldset class="casePointFieldset">
<div>
<label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
</div>
<button class="removeCase">Remove</button>
</fieldset>
<fieldset class="casePointFieldset">
<div>
<label><span>Duty:</span> <input name="point[1]" class="duty" value="1" type="checkbox"></label>
</div>
<button class="removeCase">Remove</button>
</fieldset>
</div>
<!-- include template -->
<span id="casePointTemplate" data-template="<fieldset class="casePointFieldset"><div><label><span>Duty:</span> <input name="point[__index__]" class="duty" value="1" type="checkbox"></label></div><button class="removeCase">Remove</button></fieldset>">
</span>
</fieldset>
<button id="addCasePoint">Add Point</button>
</form>
问题是你如何绑定它们。该.click
函数(或.on('click')
)基本工作原理是这样的:
$('.your.selector.here')
请注意我如何提到它绑定到已经存在的那些?这意味着它不会自动绑定到新创建的。但是,您可以使用.on
绑定到这些元素的父元素,然后在选择器上侦听事件。我会告诉你我的意思:
$('#addItem').click(function() {
$('.container').append('<button class="item">Item</button>');
});
// Notice that I'm binding to the parent
// then specifying which events from it's children
// I want to listen to (click events from .item elements)
$('.container').on('click', '.item', function() {
console.log("I'm an item");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="item">Item</button>
</div>
<button id="addItem">Add New Item</button>
如果你改变你on('click'
的工作方式,那么你就不会有问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句