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方法与'selector'参数一起使用的方式有点危险。它需要了解Event Bubbling，并且可能是触发多个事件的来源。

Answer 2

我们必须stopPropagation（）为了避免Clicks触发事件太多次。

$(this).find('#cameraImageView').on('click', function(evt) {
evt.stopPropagation();
console.log("Camera click event.");
});

点击次数会触发事件太多次 - Jquery

2 个答案: