Question

我有一些表示测验创建页面的表单，我想动态添加这些问题的问题和答案。我想对新创建的按钮上的点击事件做出回应。

问题是onClick事件仅在从头开始存在的第一个按钮上执行。

以下是我的代码示例。我的表单ID为myForm，div为questioni，其中包含有关i - 问题的所有内容（也是类new_answer的按钮，用于添加该特定问题的答案），变量curr_q（我正在创建的当前问题）。

$(function () {
    $("#myForm").on('click', "#question" + curr_q + " .new_answer", function () {
        alert("#question" + curr_q + " .new_answer");
        });
});

这也是小提琴 - http://jsfiddle.net/sruzic/8yt9jcqh/（它有点压倒性但问题是当你点击现有的Create Question时，新创建的Create Answer按钮没有响应，而＃39;旧的＆＃39; Create Answer警告选择器是question1 .new_answer，它是新创建的Create Answer按钮？！

提前致谢。

Answer 1

将您的代码更新为此。检查demo

        $(function () {
            var selector = "#question" + curr_q + " .new_question";
            $(selector).click(function () {
                curr_q++;
                alert(curr_q);
                total_q++;
                $('#myForm').append(generateQuestionSubForm(total_q))

                $("#myForm").on('click', "#question" + curr_q + " .new_answer", function () {
            alert("#question" + curr_q + " .new_answer");
                 });

            });
        });

Answer 2

除了更改事件侦听器之外，只需在创建新项目时从先前的输入中删除new_answer类。这样的事情应该有效：

$(function () {
            var selector = "#question" + curr_q + " .new_question";
            $(selector).click(function () {
                curr_q++;
                alert(curr_q);
                total_q++;
                $('.new_answer').removeClass('new_answer');
                $('#myForm').append(generateQuestionSubForm(total_q))
            });
        });
        $(function () {
            $("#myForm").on('click', ".new_answer", function () {
                alert("#question" + curr_q + " .new_answer");
            });
        });

.on（）方法中的动态选择器

2 个答案: