1

So, I'm trying to make a image gallery for article editor in my project. User can choose any image that already uploaded before, or upload new image, and then the image link is placed to editor. I'm using TinyMCE editor. Here is my code

JS (Using jQuery v3.2.1)

   $("#image-list > li").on('click','.galeri-item', function() {
    $this = $(this);
    console.log("WAh!");
    tinymce.activeEditor.execCommand('mceInsertContent', false, '<img src="'+$this.prop('src')+'" style="max-width:640px;max-height:640px"/>');
    $("#galeri-modal > div.modal-dialog > div > div.modal-footer > ul > button").click();
   });

    $("#images").change(function(evt) {
     formdata = new FormData();
     $this = $(this)[0];
     var i = 0, len = $this.files.length;
     $("#response").html("Uploading...");
     for(;i < len; i++){
      gambar = $this.files[i];
      if(gambar.type.match(/image.*/)){ 
       if (formdata) {
        formdata.append("images", gambar);
       }
      }
     }
     $.ajax({
       url: "<?= base_url('artikel/aksi_upload') ?>",
       method: "POST",
       data: formdata,
       processData: false,
       contentType: false,
       success: function (res) {
        $("ul#image-list").html(res);
       }
      });
    });

I only include the upload AJAX script (when file input #images is clicked, the formdata sent to server) and the click event of #galeri-item (which is the image inside #image-list)

Here is the HTML that contain image gallery

<div id="galeri-modal" class="modal fade" role="dialog">
 <div class="modal-dialog" style="z-index:9999">
  <div class="modal-content">
   <div class="modal-header">
    <h4 class="modal-title">Galeri Gambar</h4>
   </div>
   <div class="modal-body">
   <?php echo form_open_multipart('artikel/aksi_upload');?>
     <input type="file" name="images" id="images" style="visibility:hidden" />
     <ul class="actions">
      <li><button type="button" id="uploadclick" class="button special"><span class="fa fa-plus"></span> Unggah Gambar</button></li>
     </ul>
    </form>
    <ul id="image-list">
     <?php 
     $folder = new DirectoryIterator(FCPATH."images/");
     foreach($folder as $img) {
      if(!$img->isDot()){
     ?>
      <li><img class="img img-responsive galeri-item" src="<?= base_url("images/".$img->getFilename()); ?>"/></li>
      <?php } } ?>
    </ul>
   </div>
   <div class="modal-footer">
    <ul class="actions">
    <button type="button" class="button" data-dismiss="modal"><span class="fa fa-close"></span> Tutup</button>
    </ul>
   </div>
  </div>
 </div>
</div>

So, the page is already loaded with the image list from PHP. It's working prefectly, when the image is clicked, the modal closed and image link is being added to the tinymce editor.

When I upload a new image, the AJAX will sent the image to server and returned the whole image list and replace the #image-list content. This image list is the exact code inside the #image-list. But, this time nothing happens when I click any of the image (even the console.log didn't show up). It worked after I reload the page. So, I assume there is something wrong with the click event when the whole content in #image-list is replaced with element returned from AJAX. How to fix it so I can click it after I upload the image?

Thanks for help!

Hafizh
  • 11
  • 1
  • please look at here : https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content – Javad Aug 27 '17 at 03:41
  • @Javad I already look at that, and I realized that I miss something. Should have use `$("#image-list")` instead of `$("#image-list > li")`, because the `li` is also returned from AJAX. thanks! – Hafizh Aug 27 '17 at 04:17
  • good to know , i didn't realize that it could be done that way – Javad Aug 27 '17 at 06:09

1 Answers1

0

I really don't understand your question but if you want to bind events on ajax returned content. This is how to go about it

<script>
    $(document).on("click", '.class', function(event) { 
        alert("a new event binded!");
    });
    </script>
Excellent Lawrence
  • 946
  • 11
  • 11