I have a table where users can add rows using jquery. This is all working fine to a point. the problem I have is the dynamically created row has a button with an onclick event that connect to new Ajax code to browse from computer. The problem is button work in first generated row but when i generated another the button not work .
我有一个表,用户可以使用jquery添加行。这一切都很好。我遇到的问题是动态创建的行有一个带有onclick事件的按钮,该事件连接到新的Ajax代码以从计算机浏览。问题是按钮在第一个生成的行中工作但是当我生成另一个按钮时不起作用。
This is the button with onclick event:
这是带onclick事件的按钮:
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="simple-image<?php echo $image_row; ?>" class="upimage"><?php echo $text_browse; ?></a>
New Ajax code for event :
事件的新Ajax代码:
function image_upload(field, thumb ){
new AjaxUpload('#simple-image' + <?php echo $image_row; ?>, {
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',
onChange: function(file, extension) {
this.setData({'directory': ''});
this.submit();
},
onSubmit: function(file, extension) {
$('#simple-image' + <?php echo $image_row; ?>).append('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file);
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}
if (json.error) {
alert(json.error);
}
$('.loading').remove();
}
});
};
Any help will be much appreciated.
任何帮助都感激不尽。
1 个解决方案
#1
<?php $iid = 0; ?>
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>','simple-image<?php echo $image_row.$iid; ?>');" id="simple-image<?php echo $image_row.$iid++; ?>" class="upimage"><?php echo $text_browse; ?></a>
function image_upload(field, thumb , idd ){
new AjaxUpload('#'+idd , {
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',
onChange: function(file, extension) {
this.setData({'directory': ''});
this.submit();
},
onSubmit: function(file, extension) {
$('#simple-image' + <?php echo $image_row; ?>).append('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file);
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}
if (json.error) {
alert(json.error);
}
$('.loading').remove();
}
});
};
#1
<?php $iid = 0; ?>
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>','simple-image<?php echo $image_row.$iid; ?>');" id="simple-image<?php echo $image_row.$iid++; ?>" class="upimage"><?php echo $text_browse; ?></a>
function image_upload(field, thumb , idd ){
new AjaxUpload('#'+idd , {
action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')),
name: 'image',
autoSubmit: true,
responseType: 'json',
onChange: function(file, extension) {
this.setData({'directory': ''});
this.submit();
},
onSubmit: function(file, extension) {
$('#simple-image' + <?php echo $image_row; ?>).append('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
},
onComplete: function(file, json) {
if (json.success) {
$('#' + field).attr('value','data/user/'+file);
$.ajax({
url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')),
dataType: 'text',
success: function(text) {
$('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />');
}
});
}
if (json.error) {
alert(json.error);
}
$('.loading').remove();
}
});
};