时间戳

首页 > 解决方案 > jquery 1.11.1 版：单击未使用 append() 创建的按钮

jquery - jquery 1.11.1 版：单击未使用 append() 创建的按钮

问题描述

我想在单击按钮时执行功能。按钮是使用 append() 函数创建的。

我试过使用 on 但它不起作用。

我试图实现缩放功能。我已经修改了库中的 imgages-grid.js 文件。图书馆链接：https ://github.com/taras-d/images-grid#images-grid

这是我在文件 images-grid.js 文件中修改的代码：

ImagesGridModal.prototype.renderModal = function() {
        this.$modal = $('<div>', {
            class: 'imgs-grid-modal'
        }).append(
            $('<div>', {
                class: 'zoom-btn'
            }).append(
                $('<button id="ttt">', {
                    class: 'zoom'
                }).append("+")
            ).append(
                $('<button>', {
                }).append("-")
            )
        ).appendTo('body');
    }

在另一个 js 文件中，我正在编写放大和缩小功能现在我只是想打印普通的 console.log("Executed");

这是代码：

$("#ttt").on("click", function() {
    console.log("Executed");
});

单击 + 按钮时我想要的图像大小应该增加，而当单击 - 时它应该减小。

标签： jquery

解决方案

基于源代码（https://github.com/taras-d/images-grid/blob/master/src/images-grid.js）你应该试试这个：

ImagesGridModal.prototype.renderModal = function () {
this.$modal = $('<div>', {
    class: 'imgs-grid-modal'
}).append(
    $('<div>', {
        class: 'zoom-btn'
    }).append(
        $('<button id="ttt">', {
            class: 'zoom',
            on: {
                load: this.onImageLoaded,
                click: function (event) {
                    console.log("Executed");
                }.bind(this)
            }
        }).append("+")
    ).append(
        $('<button>', {
        }).append("-")
    )
).appendTo('body');

}

推荐阅读