Question

所以，我正在尝试在我的项目中为文章编辑器创建一个图像库。用户可以选择之前已上传的任何图像，或上传新图像，然后将图像链接放置到编辑器。我正在使用TinyMCE编辑器。这是我的代码

JS（使用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);
       }
      });
    });

我只包含上传AJAX脚本（点击文件输入#images，发送到服务器的表格数据）和点击事件#galeri-item（#image-list内的图片）

以下是包含图片库的HTML

<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>

因此，该页面已经加载了PHP的图像列表。它完美地工作，当点击图像时，模态关闭和图像链接被添加到tinymce编辑器。

当我上传新图像时，AJAX会将图像发送到服务器并返回整个图像列表并替换#image-list内容。此图像列表是#image-list内的确切代码。但是，这次当我点击任何图像时都没有任何反应（即使console.log没有显示）。我重新加载页面后它工作。所以，我假设当#image-list中的整个内容被替换为从AJAX返回的元素时，click事件有问题。如何解决它，以便我上传图像后点击它？

感谢您的帮助！

Answer 1

我真的不明白你的问题但是如果你想在ajax返回的内容上绑定事件。这是怎么回事

var sd = [{"REFDATA_KEY":"Rf1","REFDATA_VALUE":"Daily"},{"REFDATA_KEY":"Rf2","REFDATA_VALUE":"Weekly"},{"REFDATA_KEY":"Rf3","REFDATA_VALUE":"Monthly"}]
var list = new Array(sd.length);
for (var i = 0; i < sd.length; i++) {
	list[i] = {
		Value: sd[i]["REFDATA_KEY"],
		Label: sd[i]["REFDATA_VALUE"]
	};
}
console.log(list);

无法点击AJAX返回的元素

1 个答案: