CODEWITHSUNDEEP
jquery
anon
anon

Reputation:

Select element which has just been created

I have come across a problem when working with JSON and making structured content after that.

The thing is that the only HTML of a panel is this:

<div class="users">
            <center>loading</center>
            <script>update_users();</script>
        </div>

But after downloading the information with JSON it ends up with something like that:

<div class="users">
<p class="name">User1</p>
<div class="detailed">
    <span>Entry1: value1</span>
</div>
</div>

The thing is that, in my case for example, I want detailed to be toggle(); as display:none should be the default value but Jquery doesn't want to select that new content.

//does work
  $(".users").click(function(){
            $(".users .detailed").toggle();
        });

//doesn't work
    $(".users .name").click(function(){
            $(".users .detailed").toggle();
        });

How can I solve the problem that Jquery doesn't work to select new content inserted to the page?

Upvotes: 0

Views: 73

Answers (5)

Oleg Novosad
Oleg Novosad

Reputation: 2421

There is .live() method, read something about that. I can advise you to use:

$.find(".users .name").click(function(){
            $(".users .detailed").toggle();
        });

Or you can bind some function using .on("click", yourfunction);

Upvotes: 0

Hello-World
Hello-World

Reputation: 9545

$(".users .name").unbind();

unbind then rebind

Upvotes: 0

Khawer Zeshan
Khawer Zeshan

Reputation: 9646

Because you are dynamically creating the .name paragraph simple .click() will not work for it. You have to use .on() method

$(document.body).on('click', '.name' ,function(){
   $(".detailed").toggle();
});

And technically if you have more than 1 users than the above approach will not work as it will toggle all the elements having .detailed class you should try this 

$(document.body).on('click', '.name' ,function(){
   $(this).next().toggle();
});

EXAMPLE

Upvotes: 0

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17566

use on

$(document).on('click',".users .name",function(){
     $(".users .detailed").toggle();
});

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

For that new content you need event delegation

$(document).on('click',".users .name",function(){
     $(".users .detailed").toggle();
});

Upvotes: 4

Related Questions