Solved

jquery selector on dynamic content not working

Posted on 2011-02-21
7
1,060 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
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.

 
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

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

910 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now