我要处理的问题是在单击时委派事件。 html模态代码段为:
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
jQuery代码是:
$(".deleteMe").on("click",".cooldiv",function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",".cooldiv",function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
因此,基本上我想在单击+或x按钮时添加或删除选项(添加/删除类cooldiv)。但这不是这种情况。
更新:
完整的代码是这样的:
<?php require "login/loginheader.php";
$questionCounter = 1;
$optCounter = 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="login/js/jquery-2.2.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="login/js/bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addQues">Input Question No. <?php echo $questionCounter ?></button>
<!-- Modal -->
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="form-signin">
<div class="alert alert-success">You have been <strong>successfully logged in</strong>.</div>
<a href="login/logout.php" class="btn btn-default btn-lg btn-block">Logout</a>
</div>
</div> <!-- /container -->
</body>
</html>
<script>
$(".deleteMe").on("click",'.cooldiv',function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",'.cooldiv',function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
</script>
当我单击输入问题编号1/2 ...时,将打开一个带有选项#和选项文本的模式。我想要单击按钮+或x时,添加带有选项#和选项文本的另一个选项字段,或者删除相同的内容。没有委派,它就不会发生,但是使用这样的委派,它甚至无法工作。
最佳答案
问题与授权无关,而与事件和动态元素的错误使用有关。
你应该用
$("#optList").on("click",'.deleteMe',function(){
和
$("#optList").on("click",'.addNext',function(){
因为
#optList
元素一直存在,所以动态添加的新元素是.deleteMe
和.addNext
。这是应该可以按预期工作的jsfiddle:
https://jsfiddle.net/ev6kajjf/7/
(请注意,optCount的值仍然存在问题。我不确定为什么它的
i
以<input type="hidden" id="optCount" name="optCount" value="i">
开头)。