handle click events for all objects inside of a div

I have some HTML as such

<div id="clickme">
<div>some stuff</div>
<div>some more stuff</div>
</div>

I place a click event on the clickme div

$("#clickme").click(function(){
alert("test");
});

But when I click on the words, the event never fires. How do I activate that click, so that it works even when I click on the tags inside the div also?

Thanks!

UPDATE:

Data is an array

$('#playerInfoContainer .playerInfoEntry').each(
    function (index) {
        var div = "";
        //alert(data[index]._userName);
        div = div + "<div id='" + data[index]._userName + "' style='display:none' class='ui-widget-content'><div style='height:200px'>";
        div = div + "</div>";
        div = div + "<input width='150px'/>";
        div = div + "</div>";
        $("#chat").append(div);
        $(this).data("player", data[index]);
      开发者_如何学Python  $(this).click(function () {
            alert($(this).data("player")._userName);
            $('#chat').find("#" + $(this).data("player")._userName).show();
        });
    });

But the alert never fires.

Using only what you have gave (so far) the code should work correctly. The only thing I can think of is that you're trying to bind an event to a node/element before it's even inserted into the DOM.

Since you're using jQuery, one way to do this is to include the code inside a dom ready event:

$(function() {
    $("#clickme").click(function() {
        alert("test");
    });
});

Try to put your code last thing before </body> and before jquery.js