Faced with a problem that jquery doesn't allow to select appended element.  I've seen a lot of advices how to solve it.  For example:   var $li = $('&lt;li&gt;&lt;span&gt;' + html + '&lt;/span&gt;&lt;/li&gt;'); $('.top').append($li);   But it can't help me in my way. I get from server list of records from database in json format and in my view and I loop by this list and generate some html structure.  For example:  $.getJSON( "/searchbytype", data, function( data ) {     $.each( data, function( key, val ) {         $('items').append('&lt;li class="item"&gt;'+ val.name + '&lt;/li&gt;');     }); });   And what I want to do next is click on some li item and to do some manipulation. Ul list may contain 100-200 li tags. Any ideas would be appreciated!
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.
6562
Consider the following HTML:  &lt;div class="foo" id="obj"&gt;    I should be changed red    &lt;div class="bar" style="color:black;"&gt;       I should not be changed red.       &lt;div class="foo"&gt;I should be changed red.&lt;/div&gt;    &lt;/div&gt; &lt;/div&gt;   Given a DOM element obj and an expression, how do I go about selecting any children and possibly obj?  I'm looking for something similar to "select descendants" but also including the parent, if it matches the expression.  var obj = $("#obj")[0];  //wrong, may include siblings of 'obj' $(".foo", $(obj).parent()).css("color", "red");  //wrong -- excludes 'obj' $(".foo", obj).css("color", "red");  //correct way, but it's annoying var matches = $(".foo", obj); if ($(obj).is(".foo")) matches = matches.add(obj); matches.css("color", "red");   Is there a more elegant solution to this?
104708
I'm working on a web page where I'm making an AJAX call that returns a chunk of HTML like:   &lt;div&gt;   &lt;!-- some html --&gt;   &lt;script type="text/javascript"&gt;     /** some javascript */   &lt;/script&gt; &lt;/div&gt;   I'm inserting the whole thing into the DOM, but the JavaScript isn't being run.  Is there a way to run it?    Some details: I can't control what's in the script block (so I can't change it to a function that could be called), I just need the whole block to be executed.  I can't call eval on the response because the JavaScript is within a larger block of HTML.  I could do some kind of regex to separate out the JavaScript and then call eval on it, but that's pretty yucky.  Anyone know a better way?
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.
3057
I need to change an element's ID using jQuery.    Apparently these don't work:  jQuery(this).prev("li").attr("id")="newid" jQuery(this).prev("li")="newid"   I found out that I can make it happen with the following code:  jQuery(this).prev("li")show(function() {     this.id="newid"; });   But that doesn't seem right to me. There must be a better way, no? Also, in case there isn't, what other method can I use instead of show/hide or other effects? Obviously I don't want to show/hide or affect the element every time, just to change its ID.  (Yep, I'm a jQuery newbie.)  Edit I can't use classes in this case, I must use IDs.
92276
I have a form that is dynamically generated, and has dynamically generated id's (and potentially classes). The forms are the same but they have the related id tacked on to the end.  How can I select each set of inputs and apply code to each one?  I was experimenting with $('input[id^=@id_airline_for_]') but could not get it to fly. I suspect I am missing some fundamental jQuery knowledge that is holding me back since I am sure this is a common problem with dynamic forms.   &lt;form method='POST'&gt;     &lt;label for="id_airline_for_8"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="airline_for_8"/&gt;     &lt;label for="id_flight_number_for_8"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="flight_number_for_8"/&gt;      &lt;label for="id_airline_for_17"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="airline_for_17"/&gt;     &lt;label for="id_flight_number_for_17"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="flight_number_for_17"/&gt;      -- snip --  &lt;/form&gt;   EDIT: I should update that i want to be able to perform some action when the input is clicked but only for classes with a matching id at the end.  To make it easy, lets say I want all inputs with a matching id at the end of the #id to disappear when one is clicked (just for arguments sake).
67748
I have a simple html block like:  &lt;span id="replies"&gt;8&lt;/span&gt;   Using jquery I'm trying to add a 1 to the value (8).  var currentValue = $("#replies").text(); var newValue = currentValue + 1; $("replies").text(newValue);   What's happening is it is appearing like:  81  then  811  not 9, which would be the correct answer.  What am I doing wrong?
21905
I tried to update a jQuery code block that was missing a curly brace. The code is incorrect, but I cannot edit it since changes under 6 characters are not allowed (at least at my level of rep?).  I understand why you don't want to allow minor copy-editing, and I agree that's fine for textual descriptions and regular writing, but 1 character can make a big difference in code.
48199
I've got this pretty simple HTML page with a jQuery datepicker:      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &lt;title&gt;jQuery Datepicker&lt;/title&gt;     &lt;link rel="stylesheet" href="../App_Themes/Default/ui.datepicker.css" type="text/css"         media="screen" title="Smoothness" /&gt;      &lt;script src="../Shared/Scripts/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;      &lt;script src="../Shared/Scripts/jquery-ui-1.5.3.min.js" type="text/javascript"&gt;&lt;/script&gt;      &lt;script language="javascript" type="text/javascript"&gt;         $(document).ready(PageLoad);          function PageLoad() {             $('#textBox').datepicker();         }     &lt;/script&gt;  &lt;/head&gt; &lt;body&gt;     &lt;input type="text" id="textBox" /&gt; &lt;/body&gt; &lt;/html&gt;   The datepicker itself seems to work perfectly but I can't apply my theme. Am I missing something really stupid here?  Thanks !!!!
45710
I'm trying to test a page that has an input but really its a drop down list. The user enters text and then a dropdown appears based on what the user inputted. They are groups that are in the database. If I look for these elements before typing anything they dont exist but once I start typing they do exist.  The problem is I cant just type the whole name and then press enter or return because an option has to be selected from the list.  I can press arrow down to get the focus on the item from the list but then if I say enter it doesnt select, it sends that enter to the original element and nothing gets selected.  I can find the select element:  var ddList = driver.FindElement(By.CssSelector(".ui-autocomplete-input")); ddList.SendKeys("Admins");   This is the first time the list appears in the html.  It looks like this:  &lt;li class="ui-menu-item" role="presentation"&gt;
24846
I am trying to work out how to get the value of table cell for each row using jQuery.  My table looks like this:  &lt;table id="mytable"&gt;   &lt;tr&gt;     &lt;th&gt;Customer Id&lt;/th&gt;     &lt;th&gt;Result&lt;/th&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;123&lt;/td&gt;     &lt;td&gt;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;456&lt;/td&gt;     &lt;td&gt;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;789&lt;/td&gt;     &lt;td&gt;&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt;   I basically want to loop through the table, and get the value of the Customer Id column for each row.  In the code below I have worked out that I need to do this to get it looping through each row, but I'm not sure how to get the value of the first cell in the row.  $('#mytable tr').each(function() {     var cutomerId =  }
7648
I want to add a "Select One" option to a drop down list bound to a List&lt;T&gt;.   Once I query for the List&lt;T&gt;, how do I add my initial Item, not part of the data source, as the FIRST element in that List&lt;T&gt; ?  I have:  // populate ti from data                List&lt;MyTypeItem&gt; ti = MyTypeItem.GetTypeItems();     //create initial entry     MyTypeItem initialItem = new MyTypeItem();     initialItem.TypeItem = "Select One";     initialItem.TypeItemID = 0; ti.Add(initialItem)  &lt;!-- want this at the TOP!     // then      DropDownList1.DataSource = ti;
6261
I am looking for a JavaScript array insert method, in the style of:  arr.insert(index, item)   Preferably in jQuery, but any JavaScript implementation will do at this point.
36235
I am after documentation on using wildcard or regular expressions (not sure on the exact terminology) with a jQuery selector.  I have looked for this myself but have been unable to find information on the syntax and how to use it. Does anyone know where the documentation for the syntax is?  EDIT: The attribute filters allow you to select based on patterns of an attribute value.
98687
If the user selects an option in a dropdown box, there must be added a label and a textbox. Using appendChild, these elements get added to the end of the container.  var newFreeformLabel = document.createElement('label'); newFreeformLabel.innerHTML = 'Omschrijving:';  var newFreeformField = document.createElement('input'); newFreeformField.className = 'textfield'; newFreeformField.name = 'factuur_orderregel[]';  var newFreeformSpacer = document.createElement('div'); newFreeformSpacer.className = 'spacer';  container.appendChild(newFreeformLabel); container.appendChild(newFreeformField); container.appendChild(newFreeformSpacer);   The issue is that these elements should be inserted at the beginning of container, not at the end.  Is there a solution to this in PrototypeJS?
75718
I'm dynamically adding &lt;script&gt; tags to a page's &lt;head&gt;, and I'd like to be able to tell whether the loading failed in some way -- a 404, a script error in the loaded script, whatever.  In Firefox, this works:  var script_tag = document.createElement('script'); script_tag.setAttribute('type', 'text/javascript'); script_tag.setAttribute('src', 'http://fail.org/nonexistant.js'); script_tag.onerror = function() { alert("Loading failed!"); } document.getElementsByTagName('head')[0].appendChild(script_tag);   However, this doesn't work in IE or Safari.  Does anyone know of a way to make this work in browsers other than Firefox?  (I don't think a solution that requires placing special code within the .js files is a good one. It's inelegant and inflexible.)
100032
How exactly do you make an auto-refreshing div with JavaScript (specifically, jQuery)?  I know about the setTimeout method, but is it really a good practice ? Is there a better method?  function update() {     $.get("response.php", function(data) {         $("#some_div").html(data);     });     window.setTimeout("update();", 10000); }