jquery selector on dynamic content not working

$('.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'?
DennieAsked:
Who is Participating?
 
BurniePCommented:
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
 
Lukasz ChmielewskiCommented:
For the dynamic content you should use live()
http://api.jquery.com/live/
0
 
DennieAuthor Commented:
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Lukasz ChmielewskiCommented:
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
 
DennieAuthor Commented:
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
 
DennieAuthor Commented:
Please ignore the above post, it is indeed working, I will try to post my real code
0
 
DennieAuthor Commented:
solved the problem.. Really stuppid n00b mistake :) Some points for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.