.on() 方法中的动态选择器答案

【问题标题】：Dynamic selector in .on() method.on() 方法中的动态选择器
【发布时间】：2015-06-06 11:46:13
【问题描述】：

我有一些表格代表测验创建页面，我想在其中动态添加问题和这些问题的答案。我想响应新创建按钮的点击事件。

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

这是我的代码示例。我有 id 为 myForm 的表单，id 为 questioni 的 div 封装了有关i-th 问题的所有内容（还有带有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 按钮没有响应，而“旧”Create Answer 提醒选择器是question1 .new_answer 正是新创建的Create Answer 按钮？！

提前致谢。

【问题讨论】：

如果你有一个函数调用，foo(bar)，那么所有的参数在传递给函数之前在被评估。意思是，"#question" + curr_question + " .new_answer" 被评估，产生一个字符串，例如"#question0 .new_answer"，这就是传递给.on 的值。稍后更改 curr_question 不会影响该值。它不会被“神奇地”重新评估。为什么不直接使用.new_answer 作为选择器呢？
我也认为是这样。我的问题有什么可能的解决方案吗？
$("#myForm").on('click', ".new_answer", function () { ... }).
所以这里的问题是，当您应该使用类时，您正在使用 ID，除非预先指定每个可能的 id 组合，否则这将永远无法工作。我们还需要了解此处使用的 HTML 结构，因为您可能需要能够根据问题在 DOM 中相对于彼此的位置来关联问题的答案。请在问题中添加示例 HTML。
在这种情况下，您可能应该将处理程序直接绑定到元素上。添加新元素时，将处理程序与前一个元素解除绑定。

标签： javascript jquery html dynamic onclick

【解决方案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");
                 });

            });
        });

【讨论】：

我认为它的工作原理就像我写的$("#myForm").on('click', ".new_answer", function () { ... })
@sruzic 是的，这也可以工作.. 那么现在有什么问题？
“我只想对我目前正在创建的问题中的事件做出回应......”
我现在类似于@Felix Kling 关于绑定事件处理程序的评论。但是，现在所有Create Answers 按钮（除了第一个）都是可点击的，这不是我想要的

【解决方案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");
            });
        });

【讨论】：