代码之家 › 专栏 › 技术社区 › topper1309

在jquery中添加和删除div不起作用

jquery javascript

topper1309 · 技术社区 · 7 年前

我试图提醒删除问题它仍然不起作用。有人能帮我吗?

<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>

1 回复 | 直到 7 年前

SomeRSGuy 7 年前

我给你做了一个片段。

问题是不能将事件绑定到动态对象。 $(文档)。需要打开。

另外,我使用了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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前