通过JQuery创建按钮时，JQuery事件不起作用

是否有一种方法可以通过jquery从新创建的元素绑定事件

这里有一个例子

HTML:

jQuery

    jQuery(document).ready(function($){
    var count = $("#medias").children('label').length;
    $(".tagadd").on('click', function() {
        count = count + 1;

        $('#medias').append('<label for="test_meta_boxes'+count+'" ><input id="test_meta_boxes'+count+'" type="text" size="100" name="ad_image" value="http://" /><input id="test_meta_boxes_button" class="button" type="button" value="Upload Image" data-int="test_meta_boxes'+count+'"/></label>' );

        return false;
    });

    $('label').find('#test_meta_boxes_button').on('click', function(e) {

        metabox = $(this).data('int');

        console.log(metabox);

    });
});

jQuery（文档）.ready（函数（$）{
变量计数=$（“#媒体”）.children（'label'）.length；
$（“.tagadd”）。在（'click'，function（）上{
计数=计数+1；
$（'#medias'）。追加（''）；
返回false；
});
$（'label'）。查找（'test#meta_box_button'）。打开（'click'，函数（e）{
metabox=$（this.data（'int'）；
控制台日志（metabox）；
});
});

当你运行这个。 单击“上载图像”按钮时，第一个标签将工作并在控制台窗口上打印

但当我通过单击“添加图像字段”按钮添加另一个标签时。 “上载图像”按钮将不起作用

---

我错过什么了吗？非常感谢您的帮助。

您只需将单击事件绑定到document.ready发生时存在的

标签#测试_元框_按钮

元素

[编辑]

而不是

$('label').find('#test_meta_boxes_button').on('click', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

试着做

$(document).on('click', 'label .test_meta_boxes_button', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

在上查看jQuery文档中的

请注意
.test\u meta\u box\u按钮
。一个页面上不应该有多个具有相同id的元素

更改
您仅将单击事件绑定到发生document.ready时存在的
标签#测试_元框_按钮
元素

[编辑]

而不是

$('label').find('#test_meta_boxes_button').on('click', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

试着做

$(document).on('click', 'label .test_meta_boxes_button', function(e) {
    metabox = $(this).data('int');
    console.log(metabox);
});

在
上查看jQuery文档中的

请注意
.test\u meta\u box\u按钮
。一个页面上不应该有多个具有相同id的元素

更改
您没有将单击时的
事件添加到新创建的元素中。创建新元素后，您需要在单击时重新应用
事件，以便它在该新元素上也处于活动状态

因此，基本上：

function ReapplyOnClickEvents()
{
      //Your on click events go here
      $(selector).on('click', function(){ /*do whatever*/});
}

... //JS that makes a new button (pseudocode):
$(whatever).AddButton(function(){
  //This is callback after add button is run:
  ReapplyOnClickEvents();
}

您没有将单击时的
事件添加到新创建的元素中。创建新元素后，您需要在单击时重新应用
事件，以便它在该新元素上也处于活动状态

因此，基本上：

function ReapplyOnClickEvents()
{
      //Your on click events go here
      $(selector).on('click', function(){ /*do whatever*/});
}

... //JS that makes a new button (pseudocode):
$(whatever).AddButton(function(){
  //This is callback after add button is run:
  ReapplyOnClickEvents();
}

如果不只是附加HTML，而是附加一些HTML，然后将按钮作为新的jQuery对象插入，那么它似乎可以工作

$(".tagadd").click(function () {
    count++;
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>');
    $('#test_meta_boxes' + count).after(
        $("<input />")
            .attr('id', "test_meta_boxes_button" + count)
            .attr('type', 'button')
            .attr('value', 'Upload Image')
            .attr('data-int', 'test_meta_boxes' + count)
            .addClass('button')
            .click(function (e) {
                metabox = $(this).data('int');
                console.log(metabox);
            })
    );
    return false;
});

还请注意，您当前正在为创建的每个按钮分配相同的id，这是一种不好的做法，因此您应该在按钮的id中包含count变量，并使用一个类以所有按钮为目标

删除了重复id问题，并将一个类放在上面的位置，使用修改后的
.on（）
方法，一切正常，请参阅fiddle
如果您不只是附加HTML，而是附加了其中的一部分，然后将按钮作为新的jQuery对象插入，那么它似乎正常工作

$(".tagadd").click(function () {
    count++;
    $('#medias').append('<label for="test_meta_boxes' + count + '" ><input id="test_meta_boxes' + count + '" type="text" size="100" name="ad_image" value="http://" /></label>');
    $('#test_meta_boxes' + count).after(
        $("<input />")
            .attr('id', "test_meta_boxes_button" + count)
            .attr('type', 'button')
            .attr('value', 'Upload Image')
            .attr('data-int', 'test_meta_boxes' + count)
            .addClass('button')
            .click(function (e) {
                metabox = $(this).data('int');
                console.log(metabox);
            })
    );
    return false;
});

还请注意，您当前正在为创建的每个按钮分配相同的id，这是一种不好的做法，因此您应该在按钮的id中包含count变量，并使用一个类以所有按钮为目标

删除了重复的id问题，在上面的位置上放置了一个类，并且使用了修改后的
.on（）
方法，一切正常，请参阅fiddle
您搜索过SO了吗？当然不是，关于这个问题有成千上万的问题。你能详细说明一下是什么吗？noob问：）StackOverflow.com。是的，我试过使用$（document）.on（'click'，'tagadd'），但仍然不起作用。不过还是谢谢你，你查过SO了吗？当然不是，关于这个问题有成千上万的问题。你能详细说明一下是什么吗？noob问：）StackOverflow.com。是的，我试过使用$（document）.on（'click'，'tagadd'），但仍然不起作用。不过还是要谢谢你。
.on
就像是一名代表。如果以
$（'item-container'）的形式使用事件监听器，则不必手动附加事件监听器。在（'event'，'selector'，eventHandler）
上。哇，谢谢，我所做的工作就是将新创建的标签放在新函数中，并在文档准备就绪后和addbutton之后调用它。谢谢！通过仅将侦听器应用于新创建的对象/元素，而不是选择器的每个元素，您可以潜在地提高性能。使用此技术可以提高性能。我所做的是把你的答案和@pete答案结合起来。
。on
就像是委托。如果以
$（'item-container'）的形式使用事件监听器，则不必手动附加事件监听器。在（'event'，'selector'，eventHandler）
上。哇，谢谢，我所做的工作就是将新创建的标签放在新函数中，并在文档准备就绪后和addbutton之后调用它。谢谢！通过仅将侦听器应用于新创建的对象/元素，而不是选择器的每个元素，您可以潜在地提高性能。使用此技术可以提高性能。我所做的是将你的答案和@pete答案结合起来。这不是OP所问的，而
$（“.tagadd”）
与问题无关。这不是OP所问的，而
$（“.tagadd”）
与问题无关。谢谢你的信息，这也很有效。感谢您添加了IDs名称问题，我也会更改它。我认为这是最好的答案…您不应该有多个具有相同id的元素。请改用类。当您使用
时，您仍然不需要手动附加事件侦听器。在
上，我添加了第二部分来解释为什么在您发表评论时可以这样做，请阅读我答案的底部部分，其中解释了id。我现在将更新我的代码以消除混淆。用所有代码片段更新了答案，新旧小提琴和解释。谢谢大家！你们大家帮了大忙！现在它起作用了。谢谢大家pete cort3z和B谢谢你们提供的信息，这也很有效。和