How do I get the index of an appended object in jQuery

Question

$("input").keypress(function(e){
    let value = $("input").val()
    if(e.which == 13 && value != ""){
        $("input").val("")
        $(".itemCategRow:nth-child(1)").append("<div class=\"button\">" + value + "</div>")
    }
})

$(".button").clicked(function(){
    alert($(this).index())
})

nothing happens when I click the buttons, the reason for getting their certain indexes is to remove certain buttons.

You mean `$(".button").click(function(){ alert($(this).index()) })` didn't work? — ruleboy21, Feb 10 '22 at 22:07
logically it is correct but the alert is still click the button I appended — John Carlo Abenales, Feb 10 '22 at 22:10
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Don't Panic, Feb 10 '22 at 22:24

ruleboy21 · Accepted Answer · 2022-02-10T22:23:24.407

0

Since the button is added dynamically, you can only listen to events on it through "event delegation". Try this

$(document).on("click", ".button", function(){
    alert($(this).index())
})

edited Feb 10 '22 at 22:23

answered Feb 10 '22 at 22:13

ruleboy21

5,510
4
17
34

Thank you so much!!! YOU ARE A GOD @ruleboy21 – John Carlo Abenales Feb 10 '22 at 22:15
last question please :(.... what if i want it to be a right click instead of left – John Carlo Abenales Feb 10 '22 at 22:19
Then you will have to use `contextmenu` instead of `click`. – ruleboy21 Feb 10 '22 at 22:20
freakin legend! CHEERS BRO! – John Carlo Abenales Feb 10 '22 at 22:21

How do I get the index of an appended object in jQuery

1 Answers1