当我添加新行时,如何重复新的ajaxupload函数[onclick]?

时间:2014-10-21 11:31:05

标签: javascript php jquery html ajax

我有在表中添加行的代码来添加新图像, 添加行的功能是工作会,但这行的浏览图像[onclick]的功能只适用于第一行。 我想让浏览图像的功能适用于我添加的每一行。

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="simple-image" class="button"><?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', '');" class="button"><?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>

添加行的功能是

&#13;
&#13;
   
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="simple-image" class="button"><?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\', \'\');" class="button"><?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++;
}
&#13;
&#13;
&#13;

我用来浏览图片或上传图片的功能是:

&#13;
&#13;
function image_upload(field, thumb) {    
var btnUpload=$('#simple-image');  
		new AjaxUpload(btnUpload, {
		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();	
		}
			});
		
   
		};
&#13;
&#13;
&#13;

可以帮助我一些人

0 个答案:

没有答案