如何用ID内的AJAX重复'onclick'功能？ [英] How to repeat 'onclick' function with AJAX within ID?
本文介绍了如何用ID内的AJAX重复'onclick'功能？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图运行新的AJAX上传并从项目的 onClick 中插入一个数据元素为multirow，问题在于第一行，当我添加另一行时，该功能不起作用，当我点击它。
HTML代码是：
< table id =imagesclass =list>
< thead>
< tr>
< td class =left><？php echo $ entry_image; ？>< / TD>
< td class =right><？php echo $ entry_sort_order; ？>< / TD>
< td>< / td>
< / tr>
< / thead>
<？php $ image_row = 0; ？>
<？php foreach（$ product_images as $ product_image）{？>
< tbody id =image-row<？php echo $ image_row;？>>
< tr>
< td class =left>< div class =image>< img src =<？php echo $ product_image ['thumb'];？> alt =id =thumb<？php echo $ image_row;？> />
< input type =hiddenname =product_image [<？php echo $ image_row;？>] [image]value =<？php echo $ product_image ['image'];？ >中id =image<？php echo $ image_row;？> />
< br />
< a onclick =image_upload（'image<？php echo $ image_row;？>'，'thumb<？php echo $ image_row;？>'）; id =imagerow<？php echo $ image_row;？> class =rowman><？php echo $ text_browse; ？>< / a>& nbsp;& nbsp; |& nbsp;& nbsp;< a onclick =$（'＃thumb<？php echo $ image_row;？>'）。attr （'src'，'<？php echo $ no_image;？>'）; $（'＃image<？php echo $ image_row;？>'）。attr（'value'，''）;> ;<？php echo $ text_clear; ？>< / A>< / DIV>< / TD>
< td class =right>< input type =textname =product_image [<？php echo $ image_row;？>] [sort_order]value =<？php echo $ product_image ['sort_order'];？> size =2/>< / td>
< td class =left>< a onclick =$（'＃image-row<？php echo $ image_row;？>'）。remove（）; class =button><？php echo $ button_remove; ？>< / A>< / TD>
< / tr>
< / tbody>
<？php $ image_row ++; ？>
<？php}？>
< tfoot>
< tr>
< td colspan =2>< / td>
< td class =left>< a onclick =addImage（）; class =button><？php echo $ button_add_image; ？>< / A>< / TD>
< / tr>
< / tfoot>
< / table>
用于行的Add函数的javascript代码是：
var image_row =<？php echo $ image_row; ？>;函数addImage（）{html ='< tbody id =image-row'+ image_row +'>'; html + ='< tr>'; html + ='< td class =left>< div class =image>< img src =<？php echo $ no_image;？> alt =id =thumb+ image_row +'/>< input type =hiddenname =product_image ['+ image_row +'] [image]value =id =image image_row +'/>< br />< a onclick =image_upload（\'image'+ image_row +'\'，\'thumb'+ image_row +'\'）; id =imagerow+ image_row +'class =rowman><？php echo $ text_browse; < / a>& nbsp;& nbsp; |& nbsp;& nbsp;< a onclick =$（\'＃thumb'+ image_row +'\'）。attr \'src\'，\'<？php echo $ no_image;？> \'）; $（\'＃image'+ image_row +'\'）。attr（\'value \'，\'\'）;><？php echo $ text_clear; ？>< / A>< / DIV>< / TD>; html + ='< td class =right>< input type =textname =product_image ['+ image_row +'] [sort_order]value =size =2/><< ; / TD>'; html + ='< td class =left>< a onclick =$（\'＃image-row'+ image_row +'\'）。remove（）; class =button><？php echo $ button_remove; ？>< / A>< / TD>; html + ='< / tr>'; html + ='< / tbody>'; $（'＃images tfoot'）。before（html）; image_row ++;}
和jQuery代码 onclick 函数是：
function image_upload（field ，thumb）{var image_row =<？php echo $ image_row; ？取代;新的AjaxUpload（'＃imagerow'+ 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文件，扩展名）{$（'＃upload'）。append（'< img src =catalog / view / theme / mall / image / loading.gifclass =loadingstyle =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：函数（text）{$（'＃'+ thumb）.replaceWith（'< img src ='+ text +'alt =id ='+ thumb +'/>'）;}} ）;} if（json.error）{alert（json.error）;} $（'。loading'）。remove（）; }}）; };
img src =https://i.stack.imgur.com/NSzVx.pngalt =description image>
我可以获得帮助吗？
解决方案
您应该从您的DOM中划分您的JavaScript。
如果你使用JQuery，你可以这样做：
< td class =left>< a data -image-row =<？php echo $ image_row;？> class =button image-row-remove><？php echo $ button_remove; ？>< / a>< / td>
然后在 c>，所以JQuery也可以识别新元素：
$（body）.on（'click'，'.image- （）;
$（'＃image-row'+ this.data（'image-row'））remove（）;
}）;
I'm trying to run new AJAX upload and insert a data element from the onClick of an item to multirow , the problem is it work for first row and when I add another row the function is not working when I click on it .
HTML code is :
<table id="images" class="list">
<thead>
<tr>
<td class="left"><?php echo $entry_image; ?></td>
<td class="right"><?php echo $entry_sort_order; ?></td>
<td></td>
</tr>
</thead>
<?php $image_row = 0; ?>
<?php foreach ($product_images as $product_image) { ?>
<tbody id="image-row<?php echo $image_row; ?>">
<tr>
<td class="left"><div class="image"><img src="<?php echo $product_image['thumb']; ?>" alt="" id="thumb<?php echo $image_row; ?>" />
<input type="hidden" name="product_image[<?php echo $image_row; ?>][image]" value="<?php echo $product_image['image']; ?>" id="image<?php echo $image_row; ?>" />
<br />
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="imagerow<?php echo $image_row; ?>" class="rowman"><?php echo $text_browse; ?></a> | <a onclick="$('#thumb<?php echo $image_row; ?>').attr('src', '<?php echo $no_image; ?>'); $('#image<?php echo $image_row; ?>').attr('value', '');"><?php echo $text_clear; ?></a></div></td>
<td class="right"><input type="text" name="product_image[<?php echo $image_row; ?>][sort_order]" value="<?php echo $product_image['sort_order']; ?>" size="2" /></td>
<td class="left"><a onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
</tr>
</tbody>
<?php $image_row++; ?>
<?php } ?>
<tfoot>
<tr>
<td colspan="2"></td>
<td class="left"><a onclick="addImage();" class="button"><?php echo $button_add_image; ?></a></td>
</tr>
</tfoot>
</table>
javascript code for Add function for row is :
var image_row = <?php echo $image_row; ?>;
function addImage() {
html = '<tbody id="image-row' + image_row + '">';
html += ' <tr>';
html += ' <td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');" id="imagerow' + image_row + '" class="rowman"><?php echo $text_browse; ?></a> | <a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>';
html += ' <td class="right"><input type="text" name="product_image[' + image_row + '][sort_order]" value="" size="2" /></td>';
html += ' <td class="left"><a onclick="$(\'#image-row' + image_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
html += ' </tr>';
html += '</tbody>';
$('#images tfoot').before(html);
image_row++;
}
and jQuery code for onclick function is :
function image_upload(field, thumb) {
var image_row = <?php echo $image_row; ?>;
new AjaxUpload('#imagerow'+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) {
$('#upload').append('<img src="catalog/view/theme/mall/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();
}
});
};
here is a pic for explanation
can I get help?
解决方案
You should probably divide your javascript from your DOM. If you use JQuery you could do something like this:
<td class="left"><a data-image-row="<?php echo $image_row; ?>" class="button image-row-remove"><?php echo $button_remove; ?></a></td>
and then use on, so JQuery can also recognize new elements:
$(body).on('click', '.image-row-remove', function(){
$('#image-row' + this.data('image-row')).remove();
});
这篇关于如何用ID内的AJAX重复'onclick'功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
