Button doesnt work on jquery when Click

Question

I have this code on my jquery

 participantText += '<div class="wrap_col td7"><input type="image" src="/pc/images/callgray.png" style="vertical-align: middle" class="actionInvite"></div>';

This is the action of class actionInvite

$(".actionInvite").click(function(){
    alert("Hello World");
});

but when i click the button it doesn't alert "Hello World".

It's just reload the page.

Try `$(document).on('click', '.actionInvite', function(){...` — j08691, Sep 03 '15 at 01:44
use delegate function `$(".wrap_col").on('click', '.actionInvite', function(){` — Tamil Selvan C, Sep 03 '15 at 01:44
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Dave, Sep 03 '15 at 01:55

Anik Islam Abhi · Accepted Answer · 2015-09-03T01:48:43.330

4

You html is dynamically assigned.

For dynamic content

Try like this

$(document).on("click",".actionInvite",function(){
    alert("Hello World");
});

edited Sep 03 '15 at 01:48

answered Sep 03 '15 at 01:45

Anik Islam Abhi

25,137
8
58
80

kennasoft · Answer 2 · 2015-09-03T02:15:46.470

The image input type is actually a submit button (thus the reload). If you must use it, then you need to do this on your class or somewhere in your form submit event handler:

$(".actionInvite").closest('form').submit(function(e){
   e.preventDefault();
   alert("Hello World");
});

With html5 and modern CSS, I'd totally forgotten that input type actually exists. I'm sure a cleaner, better solution is out there on the horizon of your mind.

here's a jsfiddle for it.

Button doesnt work on jquery when Click

2 Answers2