Question

$(document).ready(function() {
    $("img.tile").click(function() {
    var actid = $(this).data().id;
    $("#lz").load("/dialog/pre?actid=" + actid);
    $("#btnCheck").click(function() {
        alert("test");
    });
});

The load() call brings in an HTML fragment that has an <input id="btnCheck" value="Check" />
But the event doesn’t fire when I click on it.
Must have something to do with how the fragment is loaded. How do you make this work?

Answer 1

The best way would be to use delegate and take advantage of event bubbling to capture events on elements that may not yet exist. This is very easy, especially as you can work on the existing selection to provide a context:

$(document).ready(function () {
    $("img.tile").click(function () {
        var actid = $(this).data().id;
        $("#lz")
            .load("/dialog/pre?actid=" + actid)
            .delegate("#btnCheck", "click", function () {
                alert("test");
            });
    });
});

This is functionally equivalent to the load examples, but will have slightly better performance in several ways.