绑定到.load（）div中的控制事件

Question

I have a jQuery UI dialog whose content is populated using .load(), and then displayed. What I need to do is somehow bind to a button within the loaded HTML to close that dialog.

Code:

<div id="popup">
    <div id="popupContent"></div>
</div>

<script>
    $("#popupContent").load('some_URL_within_site_that_has_a_button', function () {
        $("#popup").dialog("open");
    });
</script>

I've tried a few different things, w/o success:

$("#popupContent").find(".CloseButton").on("click", function () {
    alert("this worked");
});
$(".CloseButton").on("click", function () {
    alert("this worked");
});

Any ideas on how to bind to the dynamically loaded control events?

Answer 1

You are close:

$("#popup")
    .dialog("open")
    .on("click", ".CloseButton", function() { ... });