How to attach jquery to click() event when HTML is generated dynamically?

Question

I am using the JQUeryUI to present a Dialog Box to the end user and populating it with dynamically generated HTML like this.

$('#listusers').click(function() {
    $("#dialog").html("");
    $("#dialog").attr("title", "Existing Users");
    $("#dialog").load("service/get.aspx?data=users", $(function(data) { $("#dialog").dialog({ modal: true }); }));
});

The HTML that is returned from "service/get.aspx?data=users" looks like this.

<div class="ui-widget" id="users-contain">
    <h1>Existing Users:</h1>
<table class="ui-widget ui-widget-content" id="users">
    <thead>
        <tr class="ui-widget-header">
            <th>Act</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="#" class="deleteuser" id="0delete">
                    <img src="images/49.gif" alt="help">
                </a>
            </td>
            <td id="0username">JoePlumber</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>
                <a href="#" class="deleteuser" id="1delete">
                    <img src="images/49.gif" alt="help">
                </a>
            </td>
            <td id="1username">SarahPalin</td>
            <td>[email protected]</td>
            </tr>
    </tbody>
</table>
</div>

My question is if I want to attach some jquery to the click event of all elements with a class of deleteuser like this

$(".deleteuser").click(function() {
        alert('help');
    });

Where do I put this code?

I tried like this but no luck

$('#delete-user').click(function() {
    $("#dialog").html("");
    $("#dialog").attr("title", "Existing Users");
    $("#dialog").load("service/get.aspx?data=users", $(function(data) { $("#dialog").dialog({ modal: true }); }));
    $(".deleteuser").click(function() {
        alert('help');
    });
});

pixeline · Accepted Answer · 2010-08-05 20:18:02Z

4

in your main document.ready function, add this:

$(".deleteuser").live('click',function() {
        alert('help');
    });

live() binds the event to all occurence of the selector, including those that are not present at the time of the function call, meaning, for all elements called via ajax. See the doc

answered Aug 5, 2010 at 20:18

pixeline

18.1k12 gold badges87 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nirvana Tikku · Accepted Answer · 2010-08-05 20:19:22Z

2

use live binding - http://api.jquery.com/live/

$(".delete-user").live("click", function(evt){ [ do stuff ] });

answered Aug 5, 2010 at 20:19

Nirvana Tikku

4,2152 gold badges23 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to attach jquery to click() event when HTML is generated dynamically?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related