JQuery Mobile: Access IDs after manipulating DOM

Question

I'm using an AJAX request to add some pages into my JQuery mobile site. But after adding buttons I cannot access those using the class I set before. Is there a way to inform JQuery that I updated the DOM and that there are new buttons with the class?

adding the button:

echo "<a data-role=\"button\" class=\"delbtn\" data-transition=\"fade\" data-icon=\"delete\">Delete</a>";

accessing the button:

$(".delbtn").click(function(){
  //some action.. 
});

please share some code. Are you using the same id for multiple buttons? — Gijoey, May 21 '12 at 14:09
There is generally no problem accessing newly added objects by id so you will have to show us more for us to have any idea what might be going on. Show us the HTML. Do you have duplicate IDs? — jfriend00, May 21 '12 at 14:09
sorry. I'm using classes. I try to access the buttons via the click() function. — minils, May 21 '12 at 14:13
please use `.live` or `.on` to bind the click event. refer to the docs for more info. — root, May 21 '12 at 14:20
Use the live() / on() methods tonprovide the click event om inserted elements! — Henrik Andersson, May 21 '12 at 14:20

score 0 · Accepted Answer · answered May 21 '12 at 14:23

0

you have to bind a live event handler (jQuery ON) because your buttons are added dynamically

$(document).on("click",".delbtn", function(){
  //some action.. 
});

answered May 21 '12 at 14:23

ilyes kooli

11,959
14
50
79

score 0 · Answer 2 · answered May 21 '12 at 14:30

0

http://jsfiddle.net/MEXhE/1/

$(".delbtn").live('click',function(){
    alert("clicked");
});

answered May 21 '12 at 14:30

root

1,573
3
23
38

where's the difference to `on()` ? – minils May 21 '12 at 14:40
if you're using jquery 1.7 onwards you should use `.on` instead of `.live` http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on – root May 21 '12 at 23:18

JQuery Mobile: Access IDs after manipulating DOM

2 Answers2