jquery version 1.11.1: click not working on button created using append()

Question

I want to execute function when button is clicked. Button is created using append() function.

I've tried using on but it is not working.

I trying to achieve zoom functionality. I've modified imgages-grid.js file in library. link of the library : https://github.com/taras-d/images-grid#images-grid

Here is the code I modified in file images-grid.js file :

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');
    }

And in another js file I am writing function for zoom in and out Right now I am just trying to print normal console.log("Executed");

Here is the code :

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

What I want when + button is clicked image size should increase & when - is clicked it should decrease.

post button click event code too so that we can take a look at it — Bhushan Kawadkar, Sep 19 '19 at 14:11
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — empiric, Sep 19 '19 at 14:14

score 0 · Answer 1 · answered Sep 19 '19 at 14:42

Base on source code(https://github.com/taras-d/images-grid/blob/master/src/images-grid.js) may be you should try this:

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');

}

jquery version 1.11.1: click not working on button created using append()

1 Answers1