Question

我正在尝试创建一个网站，在该网站中提出一个问题，并且会有针对这些问题的选项。

我有一个添加选项按钮，当用户单击添加选项按钮时，此功能会添加新选项。

function addOption(elem) {
            elem = $(elem);
            let ul = $(elem.parent().children()[1]);

            let addedElem = $(
                `<li class='ques-li'><input type='text' name='ques-option' class='ques-option' value='Option'><p class='remove-op'>X</p></li>`
            );
            addedElem.appendTo(ul);

        }

let addOp = $('.ques-add');
$('.ques-add').click(function () {
            addOption($(this));
});

这对于一个问题很有效，但是当用户添加另一个问题时。

通过此功能。

let addQuestion = $('form button');
        addQuestion.click(function () {
            let quesBox = $('div.questions-box');
            quesBox.html(quesBox.html() + `<div class='ques'>
                <input type="text" name="ques-name" class="ques-name">
                <ol class='ques-ul'>
                    <li class='ques-li'><input type="text" name='ques-option' class='ques-option'>
                        <p class='remove-op'>X</p>
                    </li>
                    <li class='ques-li'><input type="text" name='ques-option' class='ques-option'>
                        <p class='remove-op'>X</p>
                    </li>
                </ol>
                <p class='ques-add'>Add Another</p>
            </div>`)
        });

当我单击“添加问题”按钮时，它也起作用

但是当我在一个新创建的问题上单击添加选项按钮时，它不会创建新的选项。

我在创建新问题时注意到它没有获得新的选项按钮。

因此，我将代码更新如下：-

let addOp = $('.ques-add');
        $(document).bind('DOMNodeInserted', function(){
            addOp = $('.ques-add');
        });
        addOp.click(function () {
            addOption($(this));
        });

它也不起作用。

我不知道为什么这段代码不起作用。

谢谢。

Answer 1

尝试使用使用.on()的委派方法。这将确保该事件将被附加到以后添加到文档中的所有元素上：

$('body').on('click', '.ques-add', function () {
  addOption($(this));
});

如何检测是否在DOM中添加了新元素？

1 个答案: