Question

在这里，您可以检查动态添加的#appenddiv和所有关闭按钮的动态添加，但是当我单击关闭按钮时，它在动态调用div中不起作用。如何解决这个问题？我需要添加动态div，也可以将其删除。

function LoadStart() {
    $('#insertnewqstnbtn').click(function () {
        $('#newqstndiv').append('<div id="appenddiv" class="ms-create-new-form"><h2 class= "ms-font-xl"> Add New Question <span><a href="javascript:;" id="closequestion">Close<a/></span></h2><div class="multichoice-question-btn"><div class="item"><span>Multiple Choice?</span><input type = "checkbox" id = "toggle_addqstn" name = "" value = "" checked><div class= "toggle"><label for="toggle_addqstn"><i></i></label></div></div></div><div class="ms-input-field-div"><input id="questiontxt" type="text" placeholder="Enter question text here" class="ms-title-field" /></div><div class="ms-form-first-group form-for-ans"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 1 text" id="option1" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn1" /><label for="checkboxn1"></label></div></div></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 2 text" id="option2" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn2" /><label for="checkboxn2"></label></div></div></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 3 text" id="option3" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn3" /><label for="checkboxn3"></label></div></div></div><div class="ms-form-second-ground question-with-ans"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 4 text" id="option4" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" id="checkboxn4" /><label for="checkboxn4"></label></div></div></div><div class="ms-pagin-div" id="rqdoptionsdiv"><div class="ms-pagin-text"><p>Required correct answer</p></div><div class="ms-pagin-num" id="correctOptNum"><span>2</span><span>3</span><span class="active">4</span></div></div><button id="addnewqstnCancelbtn" class="newcoursecancelbtn">Cancel</button><button id="addnewqstnbtn" class="ms-cm-button add-detail-btn" style="width:40%;">Create</button><label id="chkpointErrMsg"></label><div class="border-bottom-line mb-bottom-15"></div></div>');
    });
    $('#closequestion').on('click', function () {
        $('#appenddiv').remove();
    });
}

LoadStart();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="newqstndiv"></div>

Answer 1

基本示例：

var i = 0;

$('#add').on('click', function () {

var removeButton = $('<button>Remove</button>')
    .attr('value', i);

var span = $('<span></span>')
    .text('Some text ' + i);

var div = $('<div></div>')
    .attr('id', 'section' + i)
    .append(span)
    .append(removeButton);

$('#list').append(div);

removeButton.on('click', function () {
    div.remove();
});

// Or like this:

// $('button[value="' + i +'"]').on('click', function(e){
//     $('#section' + $(e.target).attr('value')).remove();
// });

i++;
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="list"></div>
    <button id="add">Add</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

请记住要生成具有不同ID的元素，因为它们必须在一页中唯一。

动态添加字段时，“删除”按钮不起作用

1 个答案: