jQuery: Accessing Elements after adding them with Append

Question

i append input in div:

$("#menuItems").append("<input type='button' id='"+$("#category").val()+"' class='menuItemDelete' value="+$("#category :selected").text()+" ><br>");

then i want to access element by class name but it does not give any responce. i try this:

$(".menuItemDelete").click(function(){

    alert("abc");

});

and also try this:

$(".menuItemDelete").on("click", function(){

    alert("abc");

});

how can i access it ?

Do you get `abc` in alert when element is clicked? – Tushar Aug 25 '15 at 07:13 — Tushar, Aug 25 '15 at 07:13
@Tushar i do not get. – Muhammad Rohail Aug 25 '15 at 07:16 — Muhammad Rohail, Aug 25 '15 at 07:16

score 1 · Answer 1 · answered Aug 25 '15 at 07:13

1

Try this :

$("#menuItems").on("click",'.menuItemDelete', function(){
   alert("abc");
});

Consider to read this Event Delegation Concept for dynamic element created like yours.

answered Aug 25 '15 at 07:13

Norlihazmey Ghazali

8,762
1
19
37

score 0 · Answer 2 · answered Aug 25 '15 at 07:13

Use appendTo to get a reference back to the added elements

var els =$("<input type='button' id='"+$("#category").val()+"' class='menuItemDelete' value="+$("#category :selected").text()+" ><br>").appendTo("#menuItems");

els.filter('.menuItemDelete').click(...)

But since you are dealing with dynamic elements, you can also use event delegation. The below handler can be added on dom ready and then there is no need to worry about when the dynamic elements are added

//on dom ready handler
$('#menuItems').on('click', '.menuItemDelete', function(){

});

//later somewhere else
$("#menuItems").append("<input type='button' id='"+$("#category").val()+"' class='menuItemDelete' value="+$("#category :selected").text()+" ><br>");

score 0 · Answer 3 · answered Aug 25 '15 at 07:13

0

$(document).on("click", ".menuItemDelete", function(){
    alert("abc");
});

answered Aug 25 '15 at 07:13

Peter

447
2
10

jQuery: Accessing Elements after adding them with Append

3 Answers3