0

I want to add an onclick event to an element I insert dynamically with jQuery

It runs at first element and other generated element not run. I'd be happy if you can point out why this example is not working and how I can get it to run properly:

       <?php $image_row = 0; ?> 
          <?php foreach ($shop_images as $shop_image) { ?>
<tbody id="image-row<?php echo $image_row; ?>">
            <tr>
              <td class="left"><?php foreach ($languages as $language) { ?>
              
                <input type="text" name="shop_image[<?php echo $image_row; ?>][shop_image_description][<?php echo $language['language_id']; ?>][title]" value="<?php echo isset($shop_image['shop_image_description'][$language['language_id']]) ? $shop_image['shop_image_description'][$language['language_id']]['title'] : ''; ?>" />
                <img src="catalog/view/theme/default/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" />
                <br />
                <?php if (isset($error_shop_image[$image_row][$language['language_id']])) { ?>
                <span class="error"><?php echo $error_shop_image[$image_row][$language['language_id']]; ?></span>
                <?php } ?>
                        
                <?php } ?></td>
              <td class="left"><input type="text" name="shop_image[<?php echo $image_row; ?>][link]" value="<?php echo $shop_image['link']; ?>" /></td>
              <td class="left"><div class="image"><img src="<?php echo $shop_image['thumb']; ?>" alt="" id="thumb<?php echo $image_row; ?>" />
                  <input type="hidden" name="shop_image[<?php echo $image_row; ?>][image]" value="<?php echo $shop_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"><?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="left"><a onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
            </tr>
          </tbody> -->
             <?php $image_row++; ?> 
          <?php } ?>

and generated script as :

<script type="text/javascript"><!--

var image_row = <?php echo $image_row; ?>;



function addImage() {

    html  = '<tbody id="image-row' + image_row + '">';
 html += '<tr>';
    html += '<td class="left">';
 <?php foreach ($languages as $language) { ?>
 
 html += '<input type="text" name="shop_image[' + image_row + '][shop_image_description][<?php echo $language['language_id']; ?>][title]" value="" /> <img src="catalog/view/theme/default/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /><br />';
  
        <?php } ?>
 html += '</td>'; 
 html += '<td class="left"><input type="text" name="shop_image[' + image_row + '][link]" value="" /></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 + '\');" id="simple-image"><?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"><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++;
}
//--></script>

this is code that is not work fine and i think there is something missed

<script type="text/javascript"><!--
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) {
   $('#simple-image').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(); 
  }
   });
   
  
  }; 
//--></script>

I want the onclick to work on the click of any image. How to go about it?

Thanks,

0 Answers0