javascript - 如何使用 jQuery 将新元素添加到生成的元素中？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 3 年前。

我能够生成一个新的 <div>到另一个<div>和那些新的<div>有一个由计数器生成的自定义 ID，我需要代码才能添加新的 <div>到那些生成的地方。

代码:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script>
        var counter = 1

        $(document).ready(function () {
            $("#BtnRev").click(function () {
                $("#" + "div" + counter).remove();
                counter = counter - 1;
                if (counter <= 0)
                {
                    counter = 1;
                }
            });


                $("#BtnAdd").click(function () {
                    $("#divMaster").append("<div id='div" + counter + "' class='well'><h4><b>" + counter + ". </b>" + StepTitle.value + "</h4><p>" + Description.value + "</p><button type='button' ID='Btn" + counter + "' class='btn btn - basic'>Add</button></div>");
                    counter = counter + 1;
                    //StepTitle.value = "";
                    //Description.value = "";
                });

            /*$("#" + "Btn" + counter).click(function () {
                $("#" + "div" + counter).append("<div id='div" + counter + 1 + "' class='well'><h4><b>" + counter + ". </b>" + StepTitle.value + "</h4><p>" + Description.value + "</p><button type='button' ID='Btn" + counter + "' class='btn btn - basic'>Add</button></div>");
            });*/
        });
    </script>

    <br />
    <button type="button" ID="BtnAdd" class="btn btn-basic">Add</button>
    <button type="button" ID="BtnRev" class="btn btn-danger">Remove last step</button>
    <hr />
    <label for="StepTitle">Title: </label>
    <input type="text" id="StepTitle" class="form-control" placeholder="Title..." />
    <label for="Description">Description: </label>
    <textarea rows="5" id="Description" class="form-control"></textarea>
    <hr />
    <script src="Test2.js"></script>
    <div id="divMaster" class="well">
        <h4>This is how the steps will look like: </h4>
    </div>

我已经尝试过这个:

$("#" + "Btn" + counter).click(function () {
$("#" + "div" + counter).append("<div id='div" + counter + 1 + "' class='well'><h4><b>" + counter + ". </b>" + StepTitle.value + "</h4><p>" + Description.value + "</p><button type='button' ID='Btn" + counter + "' class='btn btn - basic'>Add</button></div>");
});

但是它不起作用，预期输出应该是几个 <div>它们本身都是由 jquery 生成的，如果你们有任何其他方法，我将非常乐意检查它们，提前感谢!

Answer 1

尝试使用:

$("#divMaster").on("click", "#"+"Btn"+counter, function(){
// your code here
});