Home/ Questions/Q 6056099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:20:19+00:00

When I use jQuery.ajax() to load HTML content from some PHP into an element

  • 0

When I use jQuery.ajax() to load HTML content from some PHP into an element on the page, jQuery selectors don’t work on elements in that loaded HTML.

Is this a common problem or do I have to put together an example?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="../jquery.js" type="text/javascript"></script> 
</head>
<body>
    <div id="htmlcontent">
        <a href="#">Blah</a><br />
        <a href="#">Bleh</a><br />
    </div>
    <div id="replacecontent">
        <br /><a href="#">Replace content</a>
    </div>
    <script type="text/javascript">
        $("#htmlcontent a").click(function() {
            alert("Clicked on a link!");
        });
        $("#replacecontent a").click(function() {
            $("#htmlcontent").html('<a href="#">This doesn't alert(). Why?</a>');
        });         
    </script>
</body>

Ok, that wasn’t too hard. 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m sure your selectors are just fine. It’s probably the event handlers that aren’t bound right. are you using .bind() or .click()? A common problem is that you can’t use those standard events to bind to from elements that don’t exist yet on the page. You may want to look into .live(), which attaches a handler to the event for all elements which match the current selector, now and in the future.

    So try this: 

        $("#htmlcontent a").live('click', function() {
        alert("Clicked on a link!");
    });
    • 0