Question

所以我有一个具有以下结构的页面

<div class="editCampaignBanner">
    <div>
    <hr>
    <label for="file">Upload a new image</label>
    <input id="file" type="file" name="file" class="valid">
    <label for="NewImageURLs">Link URL (Optional)</label>
    <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
    <hr>
    </div>
</div>

因此我写了一些jquery：

$('div.editCampaignBanner input:file').on('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

所以当我在文件中输入一个元素时，它会在前一个元素下生成一个div：

    <div class="editCampaignBanner">
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label for="NewImageURLs">Link URL (Optional)</label>
        <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
        <hr>
        </div>
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label for="NewImageURLs">Link URL (Optional)</label>
        <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
        <hr>
        </div>
    </div>

但是现在，尽管事件是使用.on()注册的，但div中的第二个文件输入并不会触发事件。我错过了什么？

Answer 1

替换

$('div.editCampaignBanner input:file').on('change', function () {

通过

$('div.editCampaignBanner').on('change', 'input:file', function () {

Answer 2

$(document).delegate("div.editCampaignBanner input:file", "change", function() {
  //code goes here
});


$(document).on('change', 'div.editCampaignBanner input:file', function () {
 //code goes here
});

为所有匹配的元素附加处理程序到一个或多个事件选择器，现在或将来，基于一组特定的根元素。从jQuery 1.7开始，.delegate（）已被.on（）方法取代。但是，对于早期版本，它仍然是使用事件委派的最有效方法。有关事件绑定和委派的更多信息，请参见.on（）方法。

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

Answer 3

试试这个：

$('div.editCampaignBanner').on('change','input:file', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

Answer 4

可以使用$.live() jquery方法，它已被弃用但对我有用：

$('div.editCampaignBanner input:file').live('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

更多信息：http://api.jquery.com/live/

如果您不愿意使用最新版本（.on()），请按以下方式使用：

function fileChanged(ele){
    var value = ele.val();
    var div = ele.parent();
    var html = '<div>'+ div.html() + '</div>';
    if (value.length > 0) {
        div.after(html);
    }
    else if (ele > 1) {
        div.remove();
    }
    $('div.editCampaignBanner').unbind().on('change','input:file', function () {
        fileChanged($(this))
    });
}
$(function(){
    $('div.editCampaignBanner').on('change','input:file', function () {
        fileChanged($(this))
    });
});

Jquery .on（'change'）不为动态添加的元素触发

4 个答案: