Solved

jquery selector on dynamic content not working

Posted on 2011-02-21
7
1,065 Views
Last Modified: 2012-08-13
$('.edit').click(function() {
      $("#somediv").append('<div id="test">hi</div>');
      test_function();
});

function test_function() {
      alert($("#test").html());
}

Why is the alert not showing 'hi'?
0
Comment
Question by:Dennie
  • 4
  • 2
7 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34947319
For the dynamic content you should use live()
http://api.jquery.com/live/
0
 
LVL 16

Accepted Solution

by:
BurnieP earned 250 total points
ID: 34947361
Hi,

I have tested your code snippet and it works fine.  So it leads me to believe that it can be 3 things.

- Make sure you are putting your code into the document.ready :

  $(document).ready(function () {
    $('.edit').click(function () {
      $("#somediv").append('<div id="test">hi</div>');
      test_function();
    });

    function test_function() {
      alert($("#test").html());
    }
  });

- Make sure that your button really does have class="edit".

- If you are using an <asp:Button , it might be posting back to the server hence why the alert is not showing.  So add return false; to your click function :

    $('.edit').click(function () {
      $("#somediv").append('<div id="test">hi</div>');
      test_function();
      return false;
    });
0
 

Author Comment

by:Dennie
ID: 34949525
The code posted is a very simplified version of the code I have. this is a bit more like the situation


  $(document).ready(function () {

    $('.edit').live('click', function() {
      $("#somediv").append('<div id="test">hi</div>');
      test_function();
    });

    function test_function() {
      alert($("#test").html());
    }

  });

Perhaps it isn't working due to the live() click? anyway to solve it
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 27

Assisted Solution

by:Lukasz Chmielewski
Lukasz Chmielewski earned 250 total points
ID: 34949592
The live selector is for the "test" item - but you would have to bind an event to it. It does not have one.
"edit" is already there. Strange - I'm with BernieP, your code works allright in it's original way.
0
 

Author Comment

by:Dennie
ID: 34949853
Please try this:'
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $(document).ready(function () {

    $('.edit').live('click', function() {
      $("#somediv").append('<div id="test">hi</div>');
      test_function();
    });

    function test_function() {
    	console.log('test');
      alert($("#test").html());
    }

  });
</script>
</head>
<body>
	<div class="edit">edit</div>
	<div class="somediv">somediv</div>
</body>
</html>

Open in new window


I need to use the live click on (.edit) because the button is dynamically added (not in the above example, but in my real code), and it won't work without live, please help.
0
 

Author Comment

by:Dennie
ID: 34949914
Please ignore the above post, it is indeed working, I will try to post my real code
0
 

Author Comment

by:Dennie
ID: 34950022
solved the problem.. Really stuppid n00b mistake :) Some points for your help!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question