jquery problem with anchor click() method

Question

Among other things I have this html content in my content page:

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    $("[ID$=panelDetail]").dialog({
        autoOpen: false
        , resizable: false
        , height: 'auto'
        , width: 'auto'
        , modal: true
        , overlay: { opacity: 0.8, background: "black" }
    });

    function loadDialog(action) {
        $("[ID$=panelDetail]").dialog('open');
        $.ajax({
            type: "POST",
            dataType: "HTML",
            url: action,
            data: {},
            success: function(response) {
                $("#panelDetail").html('');
                $("#panelDetail").html(response);
            }
        });
    }

    $("[ID$=btnAdd]").click(function() {
        alert("click on add");
        loadDialog("/Foro/Create", "");
    });
</script>
</asp:Content>

I have then this HTML fragments in two separated sections

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContent" runat="server">
    <div id="panelDetail" style="display:none" title="Panel Title"></div>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="RightPanel" runat="server">
    <a href="#" id="btnAdd">Add new</a>
    <a href="#" id="btnEdit">Edit</a>
</asp:Content>

Why the alert inside the tag does never get called???

Thanks for helping!

Answer 1

You need to wrap your calls in a document.ready call, like this:

$(function() {
  $("a[ID$=btnAdd]").click(function() {
    alert("click on add");
    loadDialog("/Foro/Create", "");
  });
});

Otherwise the elements aren't there to be found yet :) document.ready handlers fire when the DOm's fully loaded, e.g. your links are there to be found.

In the case of UpatePanels, switch to .live(), like this:

$(function() {
  $("a[ID$=btnAdd]").live('click', function() {
    alert("click on add");
    loadDialog("/Foro/Create", "");
  });
});