How to Get the value of span inside a dynamically created div's having same class names?

Question

0.00/5 (No votes)

See more:

XML

<div id="floor_count">
   <div>Pick a Floor</div>
   <hr>
   <a class="floor_picker" href="#">
      <div name="floor_value" class="floors_for_3bhk" id="groundFloor">
         <span class="floor_value">G</span>
         <div class="flats_available_for_3bhk">2</div>
      </div>
   </a>
   <a class="floor_picker" href="#">
      <div name="floor_value" class="floors_for_3bhk" id="firstFloor">
         <span class="floor_value">1</span>
         <div class="flats_available_for_3bhk">3</div>
      </div>
   </a>
   <a class="floor_picker" href="#">
      <div name="floor_value" class="floors_for_3bhk" id="secondFloor">
         <span class="floor_value">2</span>
         <div class="flats_available_for_3bhk">1</div>
      </div>
   </a>
   <a class="floor_picker" href="#">
      <div name="floor_value" class="floors_for_3bhk" id="thirdFloor">
         <span class="floor_value">3</span>
         <div class="flats_available_for_3bhk">1</div>
      </div>
   </a>
</div>

Hi, I have this following div structure.When I implement a click event on any div with the className, I need only that particular floor name like (G,1,2).How can I get this?Please help me out?

project1.js

C#

jQuery(document).ready(function()
         {
         var floor_count;
         var floors;
                jQuery('#menu_3bhk').click(function()
                {
                    jQuery.ajax(
                    {
                        url:"floor_details.php",
                        type:"GET",
                        dataType:'JSON',
                        success:function(data)
                        {
                            floor_count="";
                            floors="";
                            for(i=0;i<jQuery(data).length;i++)
                            {
                            if(floor_count == ""){

                                floor_count = '<div>Pick a Floor</div><hr><a class="floor_picker" href="#"><div name="floor_value" class="floors_for_3bhk" id="'+data[i].floor_name+'"><span class="floor_value">' + data[i].floor_no + '</span><div class="flats_available_for_3bhk">' + data[i].no_of_3bhk_flats + '</div>' + '</div></div></a>';
                            }
                            else{
                                floor_count = floor_count + '<a class="floor_picker" href="#"><div name="floor_value"  class="floors_for_3bhk" id="'+data[i].floor_name+'"><span class="floor_value">' + data[i].floor_no + '</span><div class="flats_available_for_3bhk">' + data[i].no_of_3bhk_flats + '</div>' + '</div></a>';
                            }
                            }
                            if(floor_count!="" & floor_count!="undefined")
                            {
                            jQuery('#floor_count').html(floor_count);
                            }
                        }
                    });
                });
         });

Posted 15-Dec-14 0:06am

Janardhanam Julapalli

Updated 15-Dec-14 1:07am

v2

Add a Solution

Comments

Janardhanam Julapalli 15-Dec-14 6:22am

its not working!

Janardhanam Julapalli 15-Dec-14 6:23am

All the code inside the <div id="floor_count">is generated dynamically from jQuery with the values fetched from DB(php).

Janardhanam Julapalli 15-Dec-14 6:26am

please have a look at my jsfiddle

Janardhanam Julapalli 15-Dec-14 6:26am

http://jsfiddle.net/ke5y6q19/

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thanks7872 · Accepted Answer · 2014-12-15T00:51:00

Solution 1

Forget about dynamic elements. Use this code block

XML

$(".floors_for_3bhk").click(function () {
    alert($(this).find('span').html());
});

This will give you the span's content of clicked div(with class floors_for_3bhk). Now,all you need to do is apply this class to all the elements getting generated dynamically.

Regards..

Posted 15-Dec-14 0:51am

Thanks7872

Updated 15-Dec-14 2:01am

v3

Comments

Janardhanam Julapalli 15-Dec-14 6:59am

When I add click event like this, click is not generating anything.Its idle.

Janardhanam Julapalli 15-Dec-14 7:00am

jQuery(document).ready(function()
{
var body = $("body");
body.delegate('#groundFloor', 'click', function() {
var bhk1_floor0_value = jQuery('#floor_count').find('.floors_for_1bhk span:eq(0)').html();
console.log(bhk1_floor0_value);
});
});

Janardhanam Julapalli 15-Dec-14 7:00am

I used something like this

Janardhanam Julapalli 15-Dec-14 7:01am

But your code is working fine when I am doing it in a separate html file

Janardhanam Julapalli 15-Dec-14 7:02am

I am updating my question with my jquery

Thanks7872 15-Dec-14 8:02am

After all the code,just put the code i have updated. See the updated solution. That will give you the desired result.

Suraj Sahoo | Coding Passion · Accepted Answer · 2014-12-15T00:53:00

Solution 2

Fiddle[^]
The above is the updated fiddle which you have mentioned. Please check.
Else post back your queries if any.
Thanks

Posted 15-Dec-14 0:53am

Suraj Sahoo | Coding Passion

Updated 15-Dec-14 4:14am

v2

Comments

Janardhanam Julapalli 15-Dec-14 7:03am

I need only the first value like G 1 2 3

Thanks7872 15-Dec-14 8:04am

Then replace this line
var floor_value = $(this).text();
with this
var floor_value = $(this).find('span').html();

[no name] 15-Dec-14 10:15am

Check the updated fiddle. This has been updated.
Thanks Rohan for understanding his requirement.

Janardhanam Julapalli 15-Dec-14 21:29pm

This has worked for me!Thanks a Lot buddy!