Jquery not working when externalized it to js file.

Question

$(function() { $('#<%=btnAdd.ClientID%>').click( { code }); });

The above jquery code I have written inside the aspx code and it works fine. But when I tried to externalize the code by creating one js file and transferring the internal code to that file it does not work. I mean when I write the same code in an external file and add that to aspx page it does not work.Can any one help me to solve the problem ?

Answer 1

<%=btnAdd.ClientID%> won't be parsed by the asp.net worker process so it won't be replaced by the client id of the button. This code needs to be in your aspx page.
The alternative is to select your button a different way e.g. class, input[type="submit"] etc.

$(function() { $('input[type="submit"]').click( { code }); });

Answer 2

That's because <%=btnAdd.ClientID%> is literally in the file, it's not an evaluated server tag resulting in something like container_btnAdd, instead give the button a class, like this:

<asp:Button id="btnAdd" runat="server" CssClass="btnAdd" Text="Add" />

Then use that class in your selector, so the ID won't matter, like this:

$(function() { 
  $('.btnAdd').click({ code }); 
});