[英]Adding and removing div in jquery not working
我試圖添加問題框,如下所示,第一個刪除按鈕可以正常工作。 但是當我動態添加div然后嘗試刪除它時不起作用。 我試圖提醒刪除問題,但仍然無法正常工作。 誰可以幫我這個事 ?
JS
<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery( '#add-question' ).on('click', function() {
var lastId = jQuery('.del-question').last().data('id');
var nextId = lastId+1;
var questionBox = '<div class="question-box box-1"><h2>Question 1</h2><input type="text" name="ques_title" class="ques_title" placeholder="Enter question title" value=""><div class="form-group"><a class="del-question button" href="#" data-id="1">Remove</a></div></div>';
jQuery('.question-box').after(questionBox);
return false;
});
jQuery( '#quiz-box .del-question' ).on('click', function() {
var id = jQuery(this).data('id');
jQuery('.box-'+id).remove();
return false;
});
});
</script>
HTML
<div id="quiz-box">
<div class="question-box box-1">
<h2>Question 1</h2>
<input type="text" name="ques_title" class="ques_title" placeholder="Enter question title" value="">
<div class="form-group">
<a class="del-question button" href="#" data-id="1">Remove</a>
</div>
</div>
<div class="form-group">
<a id="add-question" class="button" href="#">Add</a>
</div>
我為您制作了一個代碼段。
問題是您不能將事件綁定到動態對象。 $(document).on是必需的。
另外,我使用了clone()並添加了“ renameQuestions”函數,只是為您提供了一種更好的方法來處理您想要的內容。
$(document).ready(function(e) { function addQuestion(){ var question = $('#question-template').clone(); question.css("display","block").removeAttr('id'); $('#questions').append(question); } function renameQuestions(){ $('.question-box').each(function(i,v){ $(this).find('.question_id').html(i); }); } $('#add-question').on('click', function() { addQuestion(); renameQuestions(); }); $(document).on('click','.del-question', function() { $(this).closest('.question-box').remove(); renameQuestions(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="questions"> <div class="question-box" id="question-template" style="display:none;"> <h2>Question <span class="question_id"></span></h2> <input type="text" name="ques_title" class="ques_title" placeholder="Enter question title" value=""> <div class="form-group"> <a class="del-question button" href="#">Remove</a> </div> </div> </div> <div class="form-group" style="margin-top:20px;"> <a id="add-question" class="button" href="#">Add</a> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.