JQuery event in javascript object

Question

I have a javascript object

function A()
{
    this.ini = function()
    {
        $('#test').html('<button id="click" >Hi</button>');
    }    

    $('#click').on('click',function(){
        alert('Hi');
    });
}

http://jsfiddle.net/G2MUE/1/

But I have a problem, the event onClick is not used.

Thanks for your help

The `#click` element does not yet exist when you try to bind your handler to it. — Frédéric Hamidi, Nov 21 '13 at 14:52
Ok I find, http://stackoverflow.com/questions/10920355/attaching-click-event-to-a-jquery-object-not-yet-added-to-the-dom — Ajouve, Nov 21 '13 at 14:53
What are your thought behind this function? Seems kind of pointless to instantiate something with hard coded values. — Johan, Nov 21 '13 at 14:54
Take a look at; http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content — Alexander Kuzmin, Nov 21 '13 at 14:57

score 6 · Answer 1 · answered Nov 21 '13 at 14:52

6

Try this

$(document.body).on('click', "#click" ,function(){
    alert('Hi');
});

You are attaching handler before the element is in the DOM.

answered Nov 21 '13 at 14:52

Manoj Nama

639
3
9

score 3 · Accepted Answer · answered Nov 21 '13 at 14:53

3

function A()
{
    this.ini = function()
    {
        $('#test').html('<button id="click" >Hi</button>');
    }    

    $(document).on('click', '#click', function(){
        alert('Hi');
    });
}

http://jsfiddle.net/G2MUE/7/

answered Nov 21 '13 at 14:53

Martin

401
2
8

score 0 · Answer 3 · answered Nov 21 '13 at 14:53

0

You dont need to put it in initializeation.Try like

function A()
{    
    $('#test').html('<button id="click" >Hi</button>');             
    $('#click').on('click',function(){
       alert('Hi');
    });
}
A();

See this DEMO

answered Nov 21 '13 at 14:53

Gautam3164

28,027
10
58
83

1

why need to down it..??Any reason – Gautam3164 Nov 21 '13 at 14:57

score -1 · Answer 4 · answered Nov 21 '13 at 14:52

You're trying to bind a handler to an element that doesn't exist. Try something like this:

http://jsfiddle.net/pdT24/

function A() {
    this.ini = function () {
        $('<button id="click" >Hi</button>')
            .click(clickfn)
            .appendTo('#test');

    }

    var clickfn = function (e) {
        alert('Hi');
    };
}
var a = new A();
a.ini();

An alternative would be event delegation with on():

$('#test').on('click', '#click', function() { ... });

JQuery event in javascript object

4 Answers4