单击新插入的变量块中的关闭按钮时没有任何反应
Nothing happening on clicking on close button in newly inserted variable- block
inserAfter 工作正常，但我也想执行删除。单击带有closequest ID的按钮时，即使警报消息没有出现，也没有任何反应。
//for adding ques ans and comment
var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="closequest" class="btn btn-purple" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$("#addQuestion").on("click", function() {
$(qBlock).insertAfter(".qandaBlock");
});
$(document).ready(function() {
$("#closequest").on("click", function() {
alert("ok");
$('qblock').remove(".newqandaBlock");
});
}); < /script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock">
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>这里的问题是动态添加的元素必须告诉jQuery它们存在。早些时候我们使用live但现在jQuery支持。 上是委派。它说查找此元素上发生的所有事件，或者它是子元素，即您可以将其范围限定为特定的子元素。因此，请选择存在的最接近的父项，而不是正文或文档。
此外，id 必须是唯一的，因此在这种情况下您不能使用 id 而使用类。
将脚本标记放在关闭正文之前
var qBlock='<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" id="" class="btn btn-purple closequest" style=""><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
$("#resetblock").on("click",'.closequest', function(){
alert("ok");
$(this).closest(".newqandaBlock").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock" >
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>应按如下所示委派事件处理程序，以便事件处理程序使用动态添加的元素。
除此之外，不要在动态注入的模板中使用id - 改用类名，否则会使您的 HTML 无效。最后，您应该保留对添加块的引用：
//for adding ques ans and comment
var qBlock = '<div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span>close</button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div>';
$(document).ready(function() {
var latestBlock;
$("#addQuestion").on("click", function() {
latestBlock = $(qBlock).insertAfter(".qandaBlock");
});
$(document).on("click", ".closequest", function() {
alert("ok");
latestBlock.remove();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">`
<form id="resetblock" name="resetblock">
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" id="addcomment" onclick="resetform()">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion">
<i class="fa fa-plus-square-o"></i> Add Another Question
</button>
</div>
</form>
</div>$（'qblock'） 不是有效的 HTML 元素，这不起作用，不要忘记 '." 或 '#'。使用 $（'.newqandaBlock'）.remove（） 之类的东西来删除类。
相关文章：
- 打开/关闭按钮以显示/隐藏内容
- 如何在用户按下F5键或单击浏览器时显示自定义的fancybox's后退/关闭按钮
- 调用JQuery弹出关闭按钮上的JS'X'
- 用户单击“关闭”按钮后，将永久关闭灯箱
- 带有关闭按钮的javascript/jquery响应工具提示
- 如何在标题上创建弹出框，当点击关闭按钮时，不使用jquery或php在网站中显示
- 如何使用jquery关闭模态窗口，通过模拟模态's关闭按钮
- 关闭按钮(右上 X）以执行类似于控件的操作
- 如何禁用最大化，最小化和关闭按钮以打开新窗口
- js iframe 关闭按钮
- 如何在浮动层上打开新网站关闭按钮
- 单击关闭按钮后，Modal会自动重新打开
- jQuery-关闭按钮不起作用
- 如何在弹出窗口中插入关闭按钮
- 如何使JQuery模式关闭按钮更大
- 映射:如何在infotemplate中添加关闭按钮
- 从JSON模式创建表单，如何添加关闭按钮
- 单击新插入的变量块中的关闭按钮时没有任何反应
- 在单击任何浏览器的关闭按钮时，是否有任何与关闭按钮相关的特定事件，在javascript中
- 是否有任何方法可以隐藏/禁用使用Javascript window.open(）打开的弹出窗口的关闭按钮
