?
Solved

jquery selector on dynamic content not working

Posted on 2011-02-21
7
Medium Priority
?
1,134 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 1000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 27

Assisted Solution

by:Lukasz Chmielewski
Lukasz Chmielewski earned 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
The viewer will learn how to count occurrences of each item in an array.
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…
Suggested Courses
Course of the Month9 days, 17 hours left to enroll

571 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