Element not reacting to JQuery Click

Question

I have added Elements using Jquery inside PHP after loading them from the database. Each button has two classes, one controlling the GUI and another controlling the Click for particular button. The code is as under

    echo "<script type='text/javascript'>$('.main').append('<button class=b_ui b$index>Change</button>'); </script>";

Now if I check the classes from Inspect Element perspective of the browser, it shows 2 classes. But when I click on it and get class of element using this code

$('.b_ui').click(function()
{
    cls = $(this).attr('class');
    alert('no. '+cls);
}

It shows only first class (GUI) and not the other which I want to use for handling click. Any help ?

@rajaprabhu : can you explain how is this duplicate of said question ? I could not get anything from that question. — Gagan93, Jul 23 '14 at 13:38
It is still returning on b_ui as a class, not the other one. — Gagan93, Jul 23 '14 at 13:43
Sorry wrongly treated this question... Thought in a different manner. — Rajaprabhu Aravindasamy, Jul 23 '14 at 13:44
@RajaprabhuAravindasamy : b$index is for handling button click. For First button, it would be b0 , for second b1 and so on (this is inside a loop. — Gagan93, Jul 23 '14 at 13:55
@j08691 : worked like a magic, please answer this question so that I can select it as the most appropriate one — Gagan93, Jul 23 '14 at 13:58

score 1 · Answer 1 · answered Jul 23 '14 at 13:54

1

You should use "on" method:

$(document).on('click', '.b_ui', function() { 
   cls = $(this).attr('class');
   alert('no. '+cls);
});

answered Jul 23 '14 at 13:54

Developer

560
4
12

score 1 · Accepted Answer · answered Jul 23 '14 at 14:06

1

Put quotes around the class attribute. <button class=\"b_ui b$index\">Change</button>

answered Jul 23 '14 at 14:06

j08691

204,283
31
260
272

score 0 · Answer 3 · answered Jul 23 '14 at 13:48

When adding elements dynamically to the DOM, they are not accessible by jQuery like an element which was there at page load. say you have this div:

<div id="div"></div>

and you add some content with jQuery so it now looks like this:

<div id="div"><span id="span"></span></div>

you cannot refer directly to the span using jQuery with $('span[id=span]'), you have to target a containing element then filter which contained element you want:

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

Element not reacting to JQuery Click

3 Answers3