Question

我有一个通过ajax调用生成的上传按钮。

$.ajax({
    url:AJAX_DIR+'post_event.php',
    type:'POST',
    processData: false,
    contentType: false,
    data:data,
    success:function(resp){
        container.html(resp);
        var upload_cover = $($.parseHTML(resp)).find('.event-upload-cover');    
        if(upload_cover.length > 0){
            console.log(upload_cover);
            upload_cover.bind('change'); //I also tried 'onchange' and it failed as well
        }   


    }
            });

控制台给了我 [input#upload-cover-9151c11e05fb881d861cd45b.event-upload-cover.hdn-input, prevObject: jQuery.fn.jQuery.init[2], context: undefined, selector: ".event-upload-cover"]，所以我确实选择了文件输入。

我有一个事件处理程序，用于所有类event-upload-cover

的change事件

$('.event-upload-cover').on('change',function(){
   alert('changed');
});

但是，当从ajax返回输入文件元素时，事件处理程序不会触发。我只能将change事件绑定到已经加载的元素

Answer 1

我相信它是因为你从响应中创建了一个新的元素和jquery对象。首先插入它，然后再次解析它以附加事件。这将创建一个新元素和jquery对象。您想要挂起元素的当前引用。试试这个：

$.ajax({
    url:AJAX_DIR+'post_event.php',
    type:'POST',
    processData: false,
    contentType: false,
    data:data,
    success:function(resp){
        var element = $($.parseHTML(resp));
        container.append(element);
        var upload_cover = element.find('.event-upload-cover');    
        if(upload_cover.length > 0){
            console.log(upload_cover);
            upload_cover.on('change',function(){
                alert('changed');
            });
        }
    }
});

要委派活动，您可以找到最近的现有元素，如下所示：

$('body').on('change', '.event-upload-cover',
    function() {
        alert('changed');
    }
);

无法将更改事件绑定到来自ajax调用的文件输入

1 个答案: