I am trying to change the text of an  link tag when it is clicked using jquery. The trick is that the  tag is created with jquery and does not exist on page load.  here's the fiddle:   the jquery looks like this:   $(document).ready(function () {  $("#round-button").click(function () {      // do something     $("#button-text").text("new text");  });  });   The a tag looks like this: &lt;a class="round-button" id="round-button" href="#"&gt;       &lt;p id="button-text"&gt;Blah!&lt;/p&gt;&lt;/a&gt;  For some reason the code does not work. It works on other elements such as a button and even other  elements but on the "#roud-button" in particular it does not.  I have heard this is a commonish problem but when i tried to implement some of the usual solutions it did not work.  Any thoughts?  thanks
112
I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off.  This happens on page ready and works just fine.  The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.  I have found this plugin (), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.
16008
I have this label control in my web page  &lt;asp:Label ID="Label1" runat="server" Text="test"&gt;&lt;/asp:Label&gt;   And when the page rendered the id of the control changes to something like this    &lt;span id="ctl00_ContentPlaceHolder1_Label3"&gt;test&lt;/span&gt;   How can I stop asp.net from changing IDs in order to perform a jQuery operation like this  $('#label1').html(xml);
42682
I'm using jQuery and I want to check the existence of an element in my page. I have written following code, but it's not working:  if($("#btext" + i) != null) {     //alert($("#btext" + i).text());     $("#btext" + i).text("Branch " + i); }   How do I check the existence of the element?
25453
I have created a 'control' using jQuery and used jQuery.extend to assist in making it as OO as possible.  During the initialisation of my control I wire up various click events like so  jQuery('#available input',              this.controlDiv).bind('click', this, this.availableCategoryClick);   Notice that I am pasing 'this' as the data argument in the bind method. I do this so that I can get at data attached to the control instance rather from the element that fires the click event.   This works perfectly, however i suspect there is a better way  Having used Prototype in the past, I remember a bind syntax that allowed you to control what the value of 'this' was in the event.  What is the jQuery way?
85862
This page does it the way I want it to:   But I want to find a better way using jQuery, can anyone point me to a good script that uses jQuery to accomplish this?
76248
How can I use the &lt;label&gt; tag within an ASP.NET application? I want it to be valid, accessible, and usable.  I understand the optimal HTML way is this:  &lt;label for="Username"&gt;Username:&lt;/label&gt; &lt;input type="text" id="Username" runat="server" /&gt;   But if the above code is in an ASP.NET user control, the input ID will change, meaning the label's "for" attribute is useless. I could make the label tag a server control and set its "for" attribute in the code (Username.ClientID), but it seems like a lot of work for such a simple thing.  I've also seen this HTML used in the past:  &lt;label&gt;     &lt;span&gt;Username&lt;/span&gt;     &lt;input type="text" id="Username" runat="server" /&gt; &lt;/label&gt;   What is the proper approach?
115333
The text editor that is shown when editing tag descriptions still uses the previous behaviour for inserting links and images. Also, the placeholder text for links is still http:// instead of https:// compared to the new editor. Another &quot;nice to have&quot; feature that exists in the main editor is the ability to paste an image from clipboard directly to the text editor without having to press the &quot;insert image&quot; toolbar-icon first. Can it get updated to match the editor we use for questions and answers?  The following screenshot is an example of how it looks if I try to insert a link for a tag description:  In comparison, this is how it looks in the new editor:
69079
I need to edit (using javascript) an SVG document embedded in an html page.  When the SVG is loaded, I can access the dom of the SVG and its elements. But I am not able to know if the SVG dom is ready or not, so I cant' perform default actions on the SVG when the html page is loaded.  To access the SVG dom, I use this code:  var svg = document.getElementById("chart").getSVGDocument();   where "chart" is the id of the embed element.  If I try to access the SVG when the html document is ready, in this way:  jQuery(document).ready( function() { var svg = document.getElementById("chart").getSVGDocument(); ...   svg is always null. I just need to know when it is not null, so I can start manipulate it. Do you know if there is a way to do it?
16263
I would like to manipulate the HTML inside an iframe using jQuery.  I thought I'd be able to do this by setting the context of the jQuery function to be the document of the iframe, something like:  $(function(){ //document ready     $('some selector', frames['nameOfMyIframe'].document).doStuff() });   However this doesn't seem to work. A bit of inspection shows me that the variables in frames['nameOfMyIframe'] are undefined unless I wait a while for the iframe to load. However, when the iframe loads the variables are not accessible (I get permission denied-type errors).  Does anyone know of a work-around to this?
100908
As pointed out in  it is possible to create a link in formatted code. But, only by using explicit HTML. Since I think creating a link to documentation within a code block is a fairly common use case, it should be possible to do this using the GUI.   I should be able to highlight some code. Press the  code formatting button. Then highlight some code within that and press the link button and create a link.  Today this results in:  [parseInt][3]("01", 10);   it should result in:  ("01",10);
57784
I'm working on a offline version of a website using jQuery and some xml files. I'm running in to a problem in jQuery when I do a $.ajax call on a xml file jQuery throws a error.  When I look at the error I can tell its loading the XML file because its in the error's responceText property. It seams to work just fine in Firefox.  This is how my call looks  $.ajax({     type: "GET",     url: "Modules/" + ModuleID + "/ModuleContent.xml",     dataType: "xml",     success: function(x) { xml = x; ProcessXML(); },     error: function(x) { alert(x.responceText); } });   When I run this on a web server it works just fine. Its only when I run it from the file its self when I have this problem.  Any ideas on how I can make this work in IE?  Edit: I found the answer to my problem.
72166
I have some HTML and jQuery that slides a div up and down to show or hide` it when a link is clicked:  &lt;ul class="product-info"&gt;   &lt;li&gt;     &lt;a href="#"&gt;YOU CLICK THIS TO SHOW/HIDE&lt;/a&gt;     &lt;div class="toggle"&gt;       &lt;p&gt;CONTENT TO SHOW/HIDE&lt;/p&gt;     &lt;/div&gt;   &lt;/li&gt; &lt;/ul&gt;   $('div.toggle').hide(); $('ul.product-info li a').click(function(event){   $(this).next('div').slideToggle(200); }   My question is: How do I use preventDefault() to stop the link acting as a link and adding "#" to the end of my URL &amp; jumping to the top of the page?  I can't figure out the right syntax, I just keep getting an error saying      preventDefault() is not a function.
61207
I have a tag in my html like this:  &lt;h1&gt;My Website Title Here&lt;/h1&gt;   Using css I want to replace the text with my actual logo. I've got the logo there no problem via resizing the tag and putting a background image in via css. However, I can't figure out how to get rid of the text. I've seen it done before basically by pushing the text off the screen. The problem is I can't remember where I saw it.
77655
I'm looking for some input on how to implement custom eventhandling in jquery the best way. I know how to hook up events from the dom elements like 'click' etc, but I'm building a tiny javascript library/plugin to handle some preview functionality.  I've got a script running to update some text in a dom element from a set of rules and data/user input I got, but now I need that same text shown in other elements that this script can't possibly know of. What I need is a good pattern to somehow observe this script producing the needed text.  So how do I do this? Did I overlook some builtin functionality in jquery to raise/handle user events or do I need some jquery plugin to do it? What do you think is the best way/plugin to handle this?
9151
How can I check the existence of an element in jQuery?  The current code that I have is this:  if ($(selector).length &gt; 0) {     // Do something }   Is there a more elegant way to approach this? Perhaps a plugin or a function?
8344
I'm working with a bit of html and Javascript code that I've taken over from someone else. The page reloads a table of data (via an asynchronous request) every ten seconds, and then re-builds the table using some DOM code. The code in question looks something like this:  var blah = xmlres.getElementsByTagName('blah'); for(var i = 0; i &lt; blah.length; i++) {     var td = document.createElement('td');     var select = document.createElement('select');     select.setAttribute("...", "...");     select.onchange = function() {         onStatusChanged(select, callid, anotherid);     };     td.appendChild(select); }   When the onchange event is fired for a &lt;select&gt; element however, it seems like the same values are being passed to the onStatusChanged() method for every &lt;select&gt; in the table (I've verified that in each iteration of the loop, callid and anotherid are being given new, distinct values).   I suspect this is occuring because of the nature of how I am setting the event handler, with the select.onchange = function() syntax. If I understand how this is working correctly, this syntax sets a closure for the onchange event to be a function which refers to these two references, which end up having a final value of whatever they are set to on the last iteration of the loop. When the event fires, the value referenced by callid and anotherid is the value set in the last iteration, not the value set at the individual iteration.  Is there a way that I can copy the value of the parameters I am passing to onStatusChanged()?  I've changed the title to better reflect the question and the accepted answer.
54158
Links in [link text][number] format don't work properly if they follow a tag using the new [tag:tagName] format. Here's the result of [tag:python] [gold badge page][1]:      [gold badge page]   Putting the tag inside the link is worse. Here's the result of [[meta-tag:bug] some text][2], where [2] is google.com:        The part of the link outside the tag just disappears silently.  EDIT: To be more precise, the entire link to [2] disappears. The markup that is produced contains (invalid) nested anchor tags, as shown here from Firefox's "View Source":  &lt;a href="http://google.com" rel="nofollow"&gt;&lt;a href="/questions/tagged/bug" class="post-tag required-tag" title="show questions tagged 'bug'" rel="tag"&gt;bug&lt;/a&gt; some text&lt;/a&gt;   So the tag is still a link, but it is a link to the tag page, which is the behavior it would have if the link to [2] didn't exist at all. The user's desired behavior in this case is... ambiguous, to be charitable.  EDIT 2: I briefly included markup from Firebug here, but it turned out to be irrelevant. It has now been removed to improve readability. See  if you're interested.