Can you 'click' loaded content in jQuery?

Asked 15/12, 2011 at 4:31 Answered 15/12, 2011 at 4:44

I am trying to create a page where the example div is clickable, as it would be below.

However I'm trying to make it so if the user clicks the logo it will reload the original content using load.

After this load has occurred is it possible to 'click' a loaded <div id="example">? I'm trying this at the moment and it fails to alert when clicking the loaded <div id="example"> that is in file.php

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#example").click(function(){
        alert("You clicked me!");
    });

    $("#logo").click(function(){
        $("#main").load("file.php");
    });
});
</script>
    </head>

<body>
    <img id="logo" src="404.gif" />

    <div id="main">
        <div id="example">This is content.</div>
    </div>
</body>
</html>

file.php contains

<div id="example">This is loaded content that can't be clicked?</div>

Lavenialaver answered 15/12, 2011 at 4:31 Comment(0)

Problem

The problem is that .click() only binds events to elements that exist in the DOM at that moment in time. Meaning that when you add a new element to the page, it will not have an event handler bound to it.

Solution

If you're using jQuery 1.7+, rather than using .click() in your code use .on() instead.

$("#main").on('click', '#example', function(){
    alert("You clicked me!");
});

...or with older versions of jQuery use .live() instead:

$("#example").live('click', function(){
    alert("You clicked me!");
});

This will ensure that new elements added to the DOM will get the event handler bound to them also.

Melanoma answered 15/12, 2011 at 4:37 Comment(7)

Your older version usage should call the .live() method rather than .on(). – Disregardful 15/12, 2011 at 4:46

This works well apart from if I have $("#example").not("#random").on('click', function(){, does the not part cause a problem? – Lavenialaver 15/12, 2011 at 4:46

Do your examples work? I seeing in the documentation that a selector is required for on or am I missing something? – Telephone 15/12, 2011 at 4:46

@DarrylHein it does need a selector, but this doesn't have to be passed inside the on parens. See examples at the bottom here api.jquery.com/on – Melanoma 15/12, 2011 at 4:49

@Silver89 you can't use not I'm afraid ... from the docs - "DOM traversal methods are not supported for finding elements to send to .live(). Rather, the .live() method should always be called directly after a selector." – Melanoma 15/12, 2011 at 4:55

Think I found a solution $("#main").on('click', "#example:not(#notme)", function(){ – Lavenialaver 15/12, 2011 at 5:1

Cool, I just found out that my 'on' syntax did infact need the additional child selector in order to delegate to 'live' - have updated my code sample accordingly – Melanoma 15/12, 2011 at 5:5

try this,

$("#example").live('click',function(){
   alert("You clicked me!");
});

Rhatany answered 15/12, 2011 at 4:34 Comment(2)

As per jquery 1.7, the live() method is deprecated. Use on instead – Disapprobation 15/12, 2011 at 4:43

if you are using jQuery 1.7+ you can use on othervise you have to use live – Rhatany 15/12, 2011 at 4:53

The problem is that after you replace the innerHTML of <div id="main">, <div id="example"> no longer has the click action on it.

There are a couple methods to solve this:

First and probably the best method is to use .on():

$("#main").on('click', '#example', function(){
   alert("You clicked me!");
});

This attaches to #main and therefore, it doesn't matter what you do with the content inside. As the events bubble up, they will be noticed by the on and then the selector will determine if the handler should run.

Second there is live. The following will replace your current click on #example:

$("#example").live('click', function(){
   alert("You clicked me!");
});

The one flaw in this is that jQuery is constantly watching the dom for any changes, which depending on how many you'll have, this can start to slow things down (although maybe not noticeably on faster machines). Also, .live() has been deprecated in 1.7.

The last option is to add a success function on the #logo click. I'd recommend creating a method so you don't have duplicate code:

var example_click = function() {
    alert("You clicked me!");
};

$("#example").click(example_click);

$("#logo").click(function(){
    $("#main").load("file.php", example_click);
});

This means that every time after #main is loaded successfully, the click will be added to #example. But this is kind of ugly as you need to call the function twice.

Telephone answered 15/12, 2011 at 4:34 Comment(0)

If you are using jquery 1.7+, use "on".

http://api.jquery.com/on/

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

Disapprobation answered 15/12, 2011 at 4:36 Comment(0)

Try putting the click() function for the example div in the callback for the load function.

Sidewalk answered 15/12, 2011 at 4:33 Comment(0)

jQuery 1.7 introduced the .on() API for event binding and event delegation:

$("#main").on("click", "#example", function() {
    alert("You clicked me!");
});

Disregardful answered 15/12, 2011 at 4:44 Comment(0)

Problem

Solution

Recommended topics

Hot tags