How to use JQuery with Master Pages?

Question

I can get simple examples to work fine as long as there's no master page involved. All I want to do is click a button and have it say "hello world" with the javascript in a .js file, using a master page. Any help very much appreciated :)

Answer 1

EDIT

As @Adam points out in the comments, there is a native jQuery mechanism that basically does the same thing as the hack in my original answer. Using jQuery you can do

 $('[id$=myButton]').click(function(){ alert('button clicked'); });  

My hack was originally developed as a Prototype work around for ASP.NET and I adapted it for the original answer. Note that jQuery basically does the same thing under the hood. I recommend using the jQuery way, though, over implementing my hack.

Original answer left for comment context

When you use a master page, ASP.NET mangles the names of the controls on the dependent pages. You'll need to figure out a way to find the right control to add the handler to (assuming you're adding the handler with javascript).

I use this function to do that:

function asp$( id, tagName ) {     var idRegexp = new RegExp( id + '$', 'i' );     var tags = new Array();     if (tagName) {         tags = document.getElementsByTagName( tagName );     }     else {         tags = document.getElementsByName( id );     }     var control = null;     for (var i = 0; i < tags.length; ++i) {        var ctl = tags[i];        if (idRegexp.test(ctl.id)) {           control = ctl;           break;        }     }      if (control) {         return $(control.id);     }     else {         return null;     } } 

Then you can do something like:

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } ); 

where you have the following on your child page

<asp:Button ID="myButton" runat="server" Text="Click Me" />