0

有没有一种方法可以通过 jquery 绑定来自新创建元素的事件。

这是一个例子。

HTML：

    <div id="meta_inner" class="gallery">
    <div id="medias">
        <label for="test_meta_boxes1" ><input id="test_meta_boxes1" 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_boxes1"/></label>
    </div>
    <input class="button tagadd add" type="button" value="Add Image Field">
</div>

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);

    });
});

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

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

我错过了什么吗？任何帮助表示赞赏。

4

3 回答 3

2

如果不只是附加 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;
});

这是一个工作小提琴。

这是因为您的.on()方法当前以 id 为目标，如果您要按照文档（见下文）绑定方法，它应该可以按预期工作。

var count = $("#medias").children('label').length;
$(".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({
                type: 'button',
                value: 'Upload Image',
                'data-int': 'test_meta_boxes' + count 
            })
            .addClass('button test_meta_boxes_button')
    );
    return false;
});

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

另请注意，您当前正在为创建的每个按钮分配相同的 id，这是不好的做法，因此您应该在按钮的 id 中包含您的计数变量，以及一个用于定位所有按钮的类。

删除了重复的 id 问题并在上面放置了一个类，并且使用修改后的方法一切正常，请参见此处.on()的小提琴

于 2013-03-07T15:46:53.807 回答
1

您只是将单击事件绑定到label #test_meta_boxes_buttondocument.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);
});

.on在http://api.jquery.com/on/查看 jQuery 文档

请注意.test_meta_boxes_button。您不应该在具有相同 ID 的页面上有多个元素。

更改<input id="test_meta_boxes_button" class="button" type="button" ...为<input class="button test_meta_boxes_button" type="button"...

于 2013-03-07T15:37:07.023 回答
0

您没有将on click事件添加到新创建的元素。创建新元素后，您需要重新应用该on click事件，因此它也在该新元素上处于活动状态。

所以基本上：

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();
}
于 2013-03-07T15:39:09.330 回答