javascript - 点击触发事件太多次 - Jquery

Question

我有一些特殊的 pb :我通过 ajax 请求类“myclass”的一些列表和 div 动态创建，然后单击它们，我称之为在输入区域中添加一些 url，然后添加一些源一个 iframe，显示在弹出窗口中

$(document).on("click", "li .myclass", function () {
    var uri = $(this).closest('li').attr("id");
    var embed = 'https://www.youtube.com/embed/';
    $('#myinput').val(val + uri);
    $('#wrapper iframe').attr('src', embed + uri);
});

然后，单击弹出窗口的按钮，我触发单击 #mybutton，创建一些文本区域

$(document).on("click", ".popup button", function () {
    event.preventDefault();
    $('#mybutton').trigger('click');
    $('#myinput').val('');
});

我的问题是，第一次单击“li .myclass”时，它会干净地创建一个文本区域。但是，如果我第二次单击，它会创建三个文本区域，然后如果我第三次单击，它会创建 6 个文本区域。我真的不明白这个行为，有人可以帮忙吗？

Answer 1

尝试替换这个:

$(document).on("click", "li .myclass", function () {

这样:

$("li .myclass").on("click", function () {

您使用 jQuery 的方式 on带有“选择器”参数的方法有点危险。它需要了解 Event Bubbling并且可能是触发多个事件的来源。