我知道如何在另一个元素中追加一个元素，但我怎么能再这样做呢？在我的示例中，当我按下+ Title按钮时，它会附加一个元素，当我按下Add Subtitle时，我会有另一个元素。
但是，当我按下Comment按钮时，我想将<p>Comment</p>添加到字幕部分下方。我怎么能这样做？
$(document).ready(function () {
$('#btnAdd').on('click', function () {
$('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>');
});
$('ul').on('click', 'li', function () {
$(this).append('</br>Subtitle <input id="sub" type="button" value="Comment" />');
});
$('li').on('click', '#sub', function () {
$(this).append('<p>Comments</p>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body style="font-family:Arial">
<input id="btnAdd" type="button" value="+ Title" />
<ul>
<li>Title <input id="title" type="button" value="Add Subtitle"/></li>
</ul>
</body>
答案 0 :(得分：0)
我觉得你能做的就是给附加元素一个id或类，然后在JQUERY中告诉另一个元素追加到那个id里面。
答案 1 :(得分：0)
<强> Working fiddle
您应该使用<div class="dependents-covered-elsewhere">
<div class="dependents-covered-elsewhere-asterisk">*</div>
<label data-bind="text: i18n('dependents.coveredElsewhere')">Is the dependent covered elsewhere?</label>
<input type="radio" name="coveredElsewhere" value="1" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() && emprel_id && vm.home.action() == 'life-events')" disabled="">
<div data-bind="visible: field.isModified() && !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
<label>
<!-- ko i18n:'yes' -->Yes
<!-- /ko -->
</label>
<input type="radio" name="coveredElsewhere" value="0" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() && emprel_id && vm.home.action() == 'life-events')" disabled="">
<div data-bind="visible: field.isModified() && !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
<label>
<!-- ko i18n:'no' -->No
<!-- /ko -->
</label>
</div>来阻止点击事件冒泡：
e.stopPropagation() 注1： $('#btnAdd').on('click', function () {
$('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>');
});
$('body').on('click', 'li', function () {
$(this).append('</br>Subtitle <input class="sub" type="button" value="Comment" />');
});
$('body').on('click', 'input.sub', function (e) {
e.stopPropagation();
$(this).parent().append('<p>Comments</p>');
});
在同一文档使用类id中应该是唯一的。
注意2：您需要将评论附加到父级而不是直接添加到输入中：
sub希望这有帮助。
$(this).parent().append('<p>Comments</p>');
$('#btnAdd').on('click', function () {
$('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>');
});
$('body').on('click', 'li', function () {
$(this).append('</br>Subtitle <input class="sub" type="button" value="Comment" />');
});
$('body').on('click', 'input.sub', function (e) {
e.stopPropagation();
$(this).parent().append('<p>Comments</p>');
});
答案 2 :(得分：0)
试试这个：
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').on('click', function () {
$('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>');
});
$('ul').on('click', '#title', function () {
$(this).closest('li').append('<p>Subtitle <input id="sub" type="button" value="Comment" /></p>');
});
$(document).on('click', '#sub', function () {
$(this).closest('li p').append('<p style="margin-left: 10px;">Comments</p>');
});
});
</script>