如何重复＆＃39; onclick＆＃39; ID中的AJAX功能？
我正在尝试运行新的AJAX上传并将项目的onClick中的数据元素插入到multirow，问题是它是否适用于第一行，当我添加另一行时，该函数无效我点击它。
HTML代码是：
<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代码是：
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++;
}
和onclick函数的jQuery代码是：
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();
}
});
};
这是一张用于解释的图片
我可以得到帮助吗？
3 个答案:
答案 0 :(得分：1)
你应该将你的javascript与你的DOM分开。 如果你使用JQuery，你可以这样做：
<td class="left"><a data-image-row="<?php echo $image_row; ?>" class="button image-row-remove"><?php echo $button_remove; ?></a></td>
然后使用on，因此JQuery也可以识别新元素：
$(body).on('click', '.image-row-remove', function(){
$('#image-row' + this.data('image-row')).remove();
});
答案 1 :(得分：0)
您需要将click函数绑定到每个动态生成的元素。尝试将此函数附加到DOM中的每个（也是动态生成的）元素。
$('body').on('click', '.yourlink', function(e) {
}
更改你的代码（你不需要onclick函数，只需给它们一个特定的类和（如果需要的话）一个唯一的id）
答案 2 :(得分：0)
最后我在朋友@EraMax的帮助下找到了解决方案
按钮上的部分HTML代码：
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="imagerow<?php echo $image_row; ?>"><?php echo $text_browse; ?></a>
我们将向onclick事件添加id，如下所示
<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>' ,'imagerow<?php echo $image_row; ?>');" id="imagerow<?php echo $image_row; ?>" class="upimage"><?php echo $text_browse; ?></a>
on onclick按钮更改时生成的行代码：
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="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="shop_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\' , \'imagerow' + image_row + '\');" id="imagerow' + image_row + '" ><?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>';
最后在onclick事件的jQuery代码中
function image_upload(image, thumb, image_row ){
new AjaxUpload('#'+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) {
$('#'+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();
}
});
};
我希望这有助于每个人都寻求这种解决方案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？