get id and value dynamically created element jquery

Question

I need the id(and other attributes such as value) of a span i previously created on an ajax event. Is there a way to do this?

This is how the span is created on php post:

    echo "<span class='non-skin-symptom-choice disease_option' ".
        "onclick='showinfo(".$var[0].");' id=".$var[0].">"
        .$var[1]." -- ".number_format($var[3]*100, 2, '.', '')."%</span>";

and I want to get its id whenever a checkbox is clicked.

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

        var id= $(this).attr('id');
        var list=[];

        $('.disease_option').each(function (){
            alert("this.val=="+ $(this).attr("val"));        //i need the value here
            var str= $(this).attr("value").split(" -- ")[1];
            alert(str);
            str=str.slice(0,str.length - 1);
            if(parseFloat(str) >=support)
                list.push(id)                                //i need the id here
        });

the checkbox is not dynamically created, so $(".chb").click(function(){} works.

somehow, $(this).attr("id") works but $(this).attr("val") returns undefined... i also tried $(this).attr("value") but same results. $(this).val returns empty.

@Tauri28 - that assumes, there's only one `.non-skin-symptom-choice` which is probably not the case (or they wouldn't need that particular id). — jfriend00, Sep 26 '14 at 06:59
Usually, you can find a specific element by using the context and hierarchy around it. For example, a click in the same part of the hierarchy can search neighboring parts of the hierarchy to find the relevant item. But, to help you do that, we'd need to see the relevant HTML. — jfriend00, Sep 26 '14 at 07:00
@Kartikeya What is the need of event delegation here?? Did you read question? — Dhaval Marthak, Sep 26 '14 at 07:00
Thanks! $(this).attr("id") works! How about getting the value? — Ray, Sep 26 '14 at 07:00
$(".non-skin-symptom-choice").on('click', function(){ $(this).attr("id")}) — Vitorino fernandes, Sep 26 '14 at 07:02
somehow, $(this).attr("id") works but $(this).attr("val") returns undefined... i also tried $(this).attr("value") but same results. $(this).val returns empty. — Ray, Sep 26 '14 at 07:06
First: never use `$(this).attr("id")`, just use `this.id` (you don't have to use jQuery for *all* the things...), second: *where* do you need to get the `id`? In the function you call with `onclick`, or somewhere else? Third: *show the html*, not the php (which is irrelevant to JavaScript, which runs in the browser*). (*I'm aware of server-side JavaScript, you're not using it.) — David Thomas, Sep 26 '14 at 07:07
This refers to the object, to which event listener is registered to so .chb. This means, $(this).attr("id") should give you the id of .chb. — Tauri28, Sep 26 '14 at 07:07

score 3 · Accepted Answer · answered Sep 26 '14 at 07:02

3

use

$(document).on('click','.chb',function(){
  var id = $(".non-skin-symptom-choice").attr("id"); 
})

as this have a high level event attachment and it can get the elements who have been created on a runtime

answered Sep 26 '14 at 07:02

aM-Vee

403
2
10

the checkboxes are not dynamically created. somehow, $(this).attr("id") works but $(this).attr("val") returns undefined... i also tried $(this).attr("value") but same results. $(this).val returns empty. – Ray Sep 26 '14 at 07:08
as span doesn't have value attribute use this var value = $(".non-skin-symptom-choice").html(); – aM-Vee Sep 26 '14 at 07:15
ah... that is why. thanks. .html(); should work. 0:) – Ray Sep 26 '14 at 07:19

score 1 · Answer 2 · answered Sep 26 '14 at 07:11

1

Try this

alert($(".non-skin-symptom-choice").attr("id"));

answered Sep 26 '14 at 07:11

Nitin Kaushal

211
1
7

score 0 · Answer 3 · edited May 23 '17 at 12:31

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have create a "delegated" binding by using on()

$(document).on('click','.chb',function(){
  var id = $(".non-skin-symptom-choice").attr("id"); 
})

possible duplicate: Click event doesn't work on dynamically generated elements

score 0 · Answer 4 · answered Sep 26 '14 at 07:12

If your DOM node did not exist when the page loaded (ie. it was added to the page via AJAX after the page loaded), jQuery cannot see it if you try to update it or read it with jQuery methods. One way to overcome this is to set up your jQuery function to reference the class or ID of the parent of the node you want to target (assuming the parent class is loaded into the page on page load), along with the class of the node you want to target. For example:

$(".chb").click(function(){
    var id = $(".your-parent-class .non-skin-symptom-choice").attr("id");
    }
}

get id and value dynamically created element jquery

4 Answers4