attaching jquery function to a span from asp.net code

Question

I am trying to add some jquery to span with a class added to it. I am using asp.net and trying to use RegisterClientScriptBlock to attach the below code to my element. "cphMain_ed1" is hardcoded in this example however I would normally been passing a parameter here just for the ease of this.

   <script language="javascript" type="text/javascript">
    $(function () {
        $('.closeButton').click(function () {
            alert('called ok');
            $("cphMain_ed1").slideUp();
        });
    });
</script>

My c# code looks like this

  String csName = string.Format("ButtonClickScript_{0}", this.ID);
        Type csType = this.GetType();

        ////// Get a ClientScriptManager reference from the Page class.
        ClientScriptManager cs = Page.ClientScript;
        StringBuilder csText = new StringBuilder();
        // csText.Append("<script  type=\"text/javascript\"> HidePanel('" + this.ID + "')");
        csText.Append("<script  type=\"text/javascript\">DoIt()");
        csText.Append("</script>");
        cs.RegisterClientScriptBlock(csType, csName, csText.ToString());

What am I doing wrong as the function is not been attached to the span with the class "closeButton"

ANy help would be great!!

Answer 1

If you add a class to that user control container you want to hide, so your result is something like this:

<div class="container">
  <span class="closeButton">Close</span>
  Other content here
</div>

Then you can do away with IDs and code-behind code altogether, and reduce your jQuery down to this:

$(function() {
  $('.closeButton').click(function () {
    $(this).closest('.container').slideUp();
  });
});

Instead of relying on an ID, it just finds the thing you want to hide in relation to the .closebutton. In this case we're using .closest() to get the nearest element up the tree matching the selector...the class that was added to the container you want to close. There are other functions to find things relatively as well, the tree traversal functions, in case you have other situations where this can save you some code.