我动态尝试创建一个包含内容和删除按钮的div,只要这个' createaction'单击按钮。
每当单击删除按钮时,我都有一个onclick功能。但我的代码在这里不起作用,我认为这是因为删除按钮ID是相同的。
我可以通过什么方式使这些按钮彼此独特?
ndk-gdb --verbose
答案 0 :(得分:2)
我建议进行两项改进,首先不要在您创建的HTML上使用id
属性,因为您可以很容易地得到影响JS逻辑的重复项 - 正如您所见。请改用类。
其次,对删除按钮使用单个委托事件处理程序,而不是在每次单击“创建”按钮时附加新的事件处理程序。
$("#createAction").click(function() {
var targetDate = $("#targetDate").val();
var followUpDate = $("#followUpDate").val();
var action = $("#actionplan").val();
var newAction = '<div class="box-header with-border actionsDiv"><div class="pull-right box-tools"><button type="button" class="btn btn-default btn-sm delete"><i class="fa fa-times">X</i></button></div><label>Target Date:</label>' + targetDate + '<label>Follow-up Date: </label>' + followUpDate + action + '</div>';
$("#actionPlanInfo").append(newAction);
$("#targetDate").val('');
$("#followUpDate").val('');
$("#actionplan").val('');
});
$("#actionPlanInfo").on("click", '.delete', function() {
var confirmation = confirm('Are you sure you want to delete this action plan/s?');
if (confirmation) {
$(this).closest('.actionsDiv').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="createAction">Create</button>
<!-- dummy values -->
<input id="targetDate" value="03/01/2017" />
<input id="followUpDate" value="10/01/2017" />
<input id="actionplan" value="foo" />
<div id="actionPlanInfo"></div>
答案 1 :(得分:2)
我建议的是,您可以将id
的值添加为html elements
属性,而不是将id
添加到可能重复的动态生成的class
中,而不是@Satpal在评论中说,使用Event Delegation
,并将点击事件保留在document
上,以找到包含delete
类的相关元素,并使用closest
和找到div.actionsDiv
并将其删除。以下是适合您的工作片段。
$("#createAction").click(function() {
var targetDate = "22-10-2016";//$("#targetDate").val();
var followUpDate = "26-10-2016";//$("#followUpDate").val();
var action = "Test plan";//$("#actionplan").val();
var newAction = "<div class='box-header with-border actionsDiv'><div class='pull-right box-tools'><button type='button' \n\
class='btn btn-default btn-sm delete'> Delete<i class='fa fa-times'></i></button></div><label>Target Date:</label>" + targetDate + "<label>Follow-up Date: </label>" + followUpDate + action + "</div>";
$("#actionPlanInfo").append(newAction);
$("#targetDate").val('');
$("#followUpDate").val('');
$("#actionplan").val('');
});
$(document).on("click",".delete", function() {
var confirmation = confirm('Are you sure you want to delete this action plan/s?');
if (confirmation == true) {
$(this).closest(".actionsDiv").remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="actionPlanInfo"></div>
<button id="createAction">Create</button>
答案 2 :(得分:0)
您可以定义一个计数器:
var newActionCount = 0;
$("#createAction").click(function() {
//rest code
});
通过将该计数器附加到id的静态部分来创建id。您还需要增加它以使其在未来元素中独一无二:
id='actionsDiv'"+(newActionCount ++)+".....
id='delete'"+(newActionCount ++)+".....
对于附加click事件,您需要使用事件委派将事件附加到动态添加的DOM。您可以使用属性start with selector来定位以id delete开头的所有删除元素:
$('#actionPlanInfo').on('click','[id^=delete]',function(){
//delete click handler
});