无法将更改事件绑定到ajax调用的文件输入
无法将更改事件绑定到ajax调用的文件输入
提问于 2015-10-21 16:35:11
我有一个通过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').on('change',function(){
alert('changed');
});但是，当输入文件元素从ajax返回时，事件处理程序不会触发。我只能将更改事件绑定到已经加载的元素
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-21 16:37:56
我相信这是因为您从响应中创建了一个新元素和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');
}
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33264707
复制相关文章
相似问题
腾讯云开发者
