单击新插入的变量块中的关闭按钮没有任何反应

Question

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>

Answer 1

您应该delegate the event handler如下所示，以便您的事件处理程序可以处理动态添加的元素。

除此之外，不要在动态注入的模板中使用 id - 请改用 class 名称，否则会使您的 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>&nbsp;
    <button type="button" class="btn btn-purple" id="addQuestion">
      <i class="fa  fa-plus-square-o"></i>&nbsp;Add Another Question
    </button>
</div>
</form>
</div>

Answer 2

$('qblock') 不是有效的 HTML 元素，这行不通，别忘了 '.'要么 '＃'。使用 $('.newqandaBlock').remove(), 删除 class.

Answer 3

这里的问题是动态添加的元素必须被告知 jQuery 它们存在。之前我们使用 live，但现在使用 jQuery supports on。是代表团。它说查找发生在该元素或其子元素上的所有事件，即您可以将其范围限定为特定的子元素。因此，选择存在的最接近的父级而不是正文或文档。

此外，id 必须是唯一的，因此在这种情况下您不能使用 id，而是使用 class。

将脚本标签放在关闭正文之前

 
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>&nbsp;
                <button type="button" class="btn btn-purple" id="addQuestion">
                    <i class="fa  fa-plus-square-o"></i>&nbsp;Add Another Question
                </button>
            </div>
        </form>
</div>

单击新插入的变量块中的关闭按钮没有任何反应

Nothing happening on clicking on close button in newly inserted variable- block

javascript

jquery

html