Question

我正在尝试运行新的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>&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="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>&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="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();	
		}
	});
	
	
};

这是一张用于解释的图片 description image

我可以得到帮助吗？

Answer 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();
});

Answer 2

您需要将click函数绑定到每个动态生成的元素。尝试将此函数附加到DOM中的每个（也是动态生成的）元素。

$('body').on('click', '.yourlink', function(e) {

}

更改你的代码（你不需要onclick函数，只需给它们一个特定的类和（如果需要的话）一个唯一的id）

Answer 3

最后我在朋友@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>&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="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>&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>';

最后在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(); 
}
 });

    };

我希望这有助于每个人都寻求这种解决方案

如何重复＆＃39; onclick＆＃39; ID中的AJAX功能？

3 个答案: