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>

然后动态添加：

<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() {

};

更新这不起作用：

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

好吧得到它......不好但是有效......

首先为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的第二个init是必要的。没有它，它就不起作用。

从动态添加元素

1 个答案: