Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jquery selector on dynamic content not working

Posted on 2011-02-21
7
Medium Priority
?
1,116 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

636 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