Вызов пользовательской функции из динамического добавленного элемента

Question

У меня есть эта функция JQuery:

 $("#agenda_image_1,#agenda_image_2,#agenda_image_3").PictureCut({ 
     InputOfImageDirectory  : "image", 
     PluginFolderOnServer  : "../xxx/modules/xxx/assets/js/jQuery-Picture-Cut-master/", 
     FolderOnServer    : "/xxx/assets/profile/", 
     EnableCrop     : true, 
     CropWindowStyle    : "Bootstrap", 
     ActionToSubmitCrop   : "../user/ajax/saveImgDataInSession", 
     ActionToSubmitUpload  : "../user/ajax/uploadImgData", 
     ImageButtonCSS    : { 
      border:0, 
      width :83, 
      height:83 
     }, 
     /*EnableButton : true,*/ 
     CropModes     : { 
      widescreen: false, 
      letterbox: false, 
      free : true 
     }, 
     EnableResize: true, 
     MinimumWidthToResize: ($(window).width()/10) * 8.5, 
     MinimumHeightToResize: ($(window).height()/10) * 7.5 

    }); 

Это называется, нажав на:

<div class="pointer agenda-nopic agendaimageplaceholder" id="agenda_image_1"></div> 

Тогда это был добавлен dynamiclly:

<div class="pointer agenda-nopic agendaimageplaceholder" id="agenda_image_2"></div> 

По:

$(document).ready(function() { 
$(document).on("click", "#agenda_add_image", function() { 
    $("#agenda_image_1").clone().empty().insertAfter("#agenda_image_1"); 
    $("#agenda_image_1").attr('id', 'agenda_image_' + $(".agendaimageplaceholder").length); 
}); 
}); 

Нажав "# Agenda_image_2", функция не была запущена.

Я думаю, что нужно что-то вроде этого:

$(document).on("PictureCut", "#agenda_image_1,#agenda_image_2", function() { 

}; 

UPDATE: Это не работает:

$(document).ready(function() { 
$(document).on("click", "#agenda_add_image", function() { 
$("#agenda_image_1").clone().empty().insertAfter("#agenda_image_1"); 
$("#agenda_image_1").attr('id', 'agenda_image_' + $(".agendaimageplaceholder").length); 

$("#agenda_image_2").PictureCut({ 
     InputOfImageDirectory  : "image", 
     PluginFolderOnServer  : "../xx/modules/xxx/assets/js/jQuery-Picture-Cut-master/", 
     FolderOnServer    : "/xxx/assets/profile/", 
     EnableCrop     : true, 
     CropWindowStyle    : "Bootstrap", 
     ActionToSubmitCrop   : "../user/ajax/saveImgDataInSession", 
     ActionToSubmitUpload  : "../user/ajax/uploadImgData", 
     ImageButtonCSS    : { 
      border:0, 
      width :83, 
      height:83 
     }, 
     /*EnableButton : true,*/ 
     CropModes     : { 
      widescreen: false, 
      letterbox: false, 
      free : true 
     }, 
     EnableResize: true, 
     MinimumWidthToResize: ($(window).width()/10) * 8.5, 
     MinimumHeightToResize: ($(window).height()/10) * 7.5 

     }); 

    }); 
}); 

Answer 1

Ok получил его ... не хорошо, но работает ...

Первый запуск плагина для Agenda_image_1.

$("#agenda_image_1").PictureCut({}); 

Затем после добавления новых элементов ... переинициализаций для agenda_image_1, а затем для всех остальных добавили, как это ...

$(document).on("click", "#agenda_add_image", function() { 
    var nextID = "#agenda_image_2"; // for example 
    $("#agenda_image_1").PictureCut({}); 
    $(nextID).PictureCut({}); 
}); 

Второй инициализация для # agenda_image_1 необходима. Без него это не сработает.