javascript - get id and value dynamically created element jquery - Stack Overflow

admin管理员组

文章数量:1394099

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.

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.

• javascript
• php
• jquery
• ajax

Share Improve this question Follow edited Sep 26, 2014 at 7:12 Ray asked Sep 26, 2014 at 6:55 RayRay 3111 silver badge55 bronze badges 11

• $(".non-skin-symptom-choice").attr("id"); – Tauri28 Commented Sep 26, 2014 at 6:57
• @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 Commented Sep 26, 2014 at 6:59
• where is your .chb class ? – Rahul Dess Commented Sep 26, 2014 at 6:59
• 3 @Kartikeya What is the need of event delegation here?? Did you read question? – Dhaval Marthak Commented Sep 26, 2014 at 7:00
• 1 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 Commented Sep 26, 2014 at 7:07

 |  Show 6 more ments

4 Answers 4

Sorted by: Reset to default 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

Try this

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

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

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 overe 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");
    }
}

本文标签： javascriptget id and value dynamically created element jqueryStack Overflow