Update, answer found. Thanks @charlietfl for pointing me in right direction.   By implementing the following I caught the updated tags  &lt;script&gt;     $("div#ItemInfo").on("click", "span.itemclass", function() {         $('#timestamp').text($.now());         }); &lt;/script&gt;   Original question: I need some advice on how to get Jquery access to tags updated by php.   This is the code on main page       &lt;!-- Native text with span. =&gt; Handled with native script--&gt;   &lt;p&gt; &lt;span&gt;Clickable&lt;/span&gt;  &lt;span&gt;text&lt;/span&gt;&lt;/p&gt; &lt;div id="timestamp"&gt;&lt;/div&gt;  &lt;!--    Content updated from data.php is put here. =&gt; Span in this content is NOT handled  by native script --&gt;  &lt;div id='ItemInfo'&gt;&lt;/div&gt;  &lt;script&gt;  $("span").click(function(){   $('#timestamp').text($.now());   $('#ItemInfo').load('data.php?iid=4');  }); &lt;/script&gt;   As you see I update content within "ItemInfo" with content from another php page. The (span) tags within this code doesn't seem to be reachable from the native script, so I have to implement another script within the php code, which makes everything much more difficult, especially in regards of escaping and formatting.   echo "&lt;script&gt;                $(document).ready(function(){                          $(\"span\").click(function(){ var iid = $(this).attr(\"id\");                  $(\"#ItemInfo\").load(\"data.php?iid=\" + iid);                     });              });    &lt;/script&gt;";  while ($row = $stmt-&gt;fetch(PDO::FETCH_ASSOC)){     extract($row); echo "&lt;span id={$IID}&gt;{$ITEM}&lt;/span&gt;&lt;br /&gt;";  }   Basically I'd appreciate a way to handle the updates from the same script on the main page.   What is the best way to keep a Jquery script updated with all the elements on the page?  I don't know if this is best handled within Jquery or PHP but appreciate all tips on how to do this in best possible manner.
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.
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.
97201
I have something like this:  &lt;div class="content"&gt;     &lt;a href="#"&gt;A&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt;     &lt;a href="#"&gt;B&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt;     &lt;a href="#"&gt;C&lt;/a&gt; &lt;/div&gt;   When one of these links is clicked, I want to perform the .hide() function on the links that are not clicked. I understand jQuery has the :not selector, but I can't figure out how to use it in this case because it is necessary that I select the links using $(".content a")  I want to do something like  $(".content a").click(function() {     $(".content a:not(this)").hide("slow"); });   but I can't figure out how to use the :not selector properly in this case.
56223
Any idea why the piece of code below does not add the script element to the DOM?  var code = "&lt;script&gt;&lt;/script&gt;"; $("#someElement").append(code);
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?
60212
In my page I need to add alt tags and Title tags from JavaScript after the DOM is loaded.   So I would like to check whether these dynamically added values will be considered during Google SEO audit.  If they are not counted, what is the solution to get dynamically appended alt tags considered.
108198
We have updated the jQuery version that Stack Overflow and Stack Exchange use from version 1.7.1 to 1.12.4 today (Tuesday, September 27, 2016). jQuery is an infrastructure library, and we've been running on an old version for a while because it worked well. However, there are a few improvements and features that made it compelling for us to upgrade, especially since some parts of the site already used a different version.  As a user of our Q&amp;A sites, nothing should visibly change, as this is an infrastructure rather than a feature update. However, with an infrastructure update like this, there is always a chance for things to slip through the cracks.     If you encounter functionality that used to work yesterday and is broken today, please leave an answer on this thread and accept my apologies in advance.   Please be aware of our .  Do note that userscripts that rely on  (like .live() - anything in the 1.7, 1.8, 1.9 and 1.10 category, and if you can in the 3.0 as well to make a future update less likely to break your script) may need to be updated. There were no DOM or other structural changes, so selectors should still be the same.  If you're curious why we're going to jQuery 1.12.4 and not 3.1, this is a matter of incrementally upgrading and making sure things work along the way. Pretty much every 1.x version had major changes, and jQuery recommends upgrading an old 1.x version to the latest 1.12.4 and  plugin first and fix anything that is deprecated. We are in this stage now and want to make sure everything still works.
48996
I'd like to implement a simple AJAX function locally that allows me to autocomplete node titles of already existing nodes as the user types. To that end, I need the ability to have an API that I can search on node titles. The problem is that when I output raw JSON, it comes surrounded by tags. So, no matter what I do, I keep getting...  &lt;html&gt;     &lt;head&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;pre style="word-wrap: break-word; white-space: pre-wrap;"&gt; {json here}&lt;/pre&gt;     &lt;/body&gt; &lt;/html&gt;   I've tried implementing a custom page template that only outputs content already, that produced the same results. Here is how I am currently doing this, in my module file...  &lt;?php  /**  * Implementation of hook_menu()  */ function content_relation_menu() {     $items = array();     $items['api'] = array(         'title' =&gt; 'Search',         'page callback' =&gt; 'content_relation_get',         'access callback' =&gt; TRUE,         'type' =&gt; MENU_CALLBACK,     );      return $items; }  function content_relation_get($term = '') {     drupal_add_http_header('Content-Type', 'application/javascript; utf-8');     $var = json_encode(         db_query("SELECT nid,title FROM {node} WHERE title LIKE :title LIMIT 5", array(":title" =&gt; $term.'%'))-&gt;fetchAll()     );     echo $var;     exit(0); }   How can I return JUST raw JSON?
64167
I need to debug a web application that uses jQuery to do some fairly complex and messy  manipulation. At one point, some of the events that were bound to particular elements, are not fired and simply stop working.  If I had a capability to edit the application source, I would drill down and add a bunch of  console.log() statements and comment/uncomment pieces of code to try to pinpoint the problem. But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools.  Firebug is very good at letting me navigate and manipulate the DOM. So far, though, I have not been able to figure out how to do event debugging with Firebug. Specifically, I just want to see a list of event handlers bound to a particular element at a given time (using Firebug JavaScript breakpoints to trace the changes). But either Firebug does not have the capability to see bound events, or I'm too dumb to find it. :-)  Any recommendations or ideas? Ideally, I would just like to see and edit events bound to elements, similarly to how I can edit DOM today.
19010
My  script has now gained quite a following (and it - allegedly - just got bust by upgrading to jQuery 1.7.1). This is a personal request to the team to consider adopting it.   Not that I don't wish to keep on maintaining it, but the next step (allowing users to define one global set of comments to be used across all their sites*) is pretty awkward for me to implement "from the outside", but would be comparatively trivial for the team (I believe).  Goes off to fix script...  * Note: I have a beta half-version of this; it requires   userscripts, and allows you to push/pull between "local" (site-specific) and "global" storage. And even if I get the global sharing 'properly' working, it would still only be for a given machine.
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.)
16373
How do I pass have a Javascript script request a PHP page and pass data to it? How do I then have the PHP script pass data back to the Javascript script?  client.js:  data = {tohex: 4919, sum: [1, 3, 5]}; // how would this script pass data to server.php and access the response?   server.php:  $tohex = ... ; // How would this be set to data.tohex? $sum = ...; // How would this be set to data.sum? // How would this be sent to client.js? array(base_convert($tohex, 16), array_sum($sum))
25094
I have HTML code like this :  &lt;div&gt;        &lt;a&gt;Link A1&lt;/a&gt;        &lt;a&gt;Link A2&lt;/a&gt;        &lt;a&gt;Link A3&lt;/a&gt; &lt;/div&gt;  &lt;div&gt;        &lt;a&gt;Link B1&lt;/a&gt;        &lt;a&gt;Link B2&lt;/a&gt;        &lt;a&gt;Link B3&lt;/a&gt; &lt;/div&gt;   When user clicks a link from above HTML, I want to get the jQuery object of the corresponding &lt;a&gt; element, and then manipulate its sibling. I can't think of any way other than creating an ID for each &lt;a&gt; element, and passing that ID to an onclick event handler. I really don't want to use IDs.   Any suggestions?
25000
I've already added my scripts, but I wanted to know the preferred way. I just put a &lt;script&gt; tag directly in the header.php of my template.  Is there a preferred method of inserting external or custom js files? How would I bind a js file to a single page? (I have the home page in mind)
26981
I searched all over this site and the web for a good and simple example of autocomplete using jQuery and ASP.NET. I wanted to expose the data used by autocomplete with a webservice (and will probably do that next). In the meantime, I got this working, but it seems a little hacky...  In my page I have a text box:  &lt;input id="txtSearch" type="text" /&gt;   I am using jQuery autocomplete, set up per their example:  &lt;link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" /&gt; &lt;script type="text/javascript" src="js/jquery.bgiframe.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.dimensions.pack.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.autocomplete.js"&gt;&lt;/script&gt;   Here is where it starts to get hacky... I call a page instead of a webservice:    &lt;script type="text/javascript"&gt;     $(document).ready(function(){         $("#txtSearch").autocomplete('autocompletetagdata.aspx');     });         &lt;/script&gt;   In the page I stripped out ALL of the html and just have this (otherwise, various HTML bits show up in the autocomplete dropdown):  &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocompletetagdata.aspx.cs" Inherits="autocompletetagdata" %&gt;   And in my autocompletetagdata.aspx, I am using SubSonic to query, format and return data from the database (one data item per line):  protected void Page_Load(object sender, EventArgs e) {     // Note the query strings passed by jquery autocomplete:     //QueryString: {q=a&amp;limit=150&amp;timestamp=1227198175320}      LookupTagCollection tags = Select.AllColumnsFrom&lt;LookupTag&gt;()         .Top(Request.QueryString["limit"])         .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")         .OrderAsc(LookupTag.Columns.TagDescription)         .ExecuteAsCollection&lt;LookupTagCollection&gt;();      StringBuilder sb = new StringBuilder();      foreach (LookupTag tag in tags)     {         sb.Append(tag.TagDescription).Append("\n");     }      Response.Write(sb.ToString()); }   If you don't do a LIKE query, then it returns everything that contains a match for the character(s) you type -- e.g., typing "a" will include "Ask" and "Answer" as well as "March" and "Mega." I just wanted it to do a starts with match.  Anyway, it works and it's pretty easy to set up, but is there a better way?
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.
98152
I am trying to customize a Sharepoint 2013 team site.  I created a copy of seattle.master and set it as default master page via context menu.  I added my custom CSS within head tages like so:  &lt;SharePoint:Scriptlink runat="server" Name="https://sharepoint.abc.org/sites/the_new_abc_portal/custom/jquery-1.10.2.min.js" Language="javascript" /&gt;  works!  I added jQuery like so:  &lt;SharePoint:ScriptLink language="javascript" name="/sites/the_new_abc_portal/custom/jquery-1.10.2.min.js" runat="server" Localizable="false" /&gt;  When I reload the page I get:        &lt;html&gt;&lt;head&gt;&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"&gt;&lt;meta name="Robots" content="NOINDEX " /&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;       &lt;script type="text/javascript"&gt;                 var gearPage = document.getElementById('GearPage');                 if(null != gearPage)                 {                 gearPage.parentNode.removeChild(gearPage);                 document.title = "Error";                 }             &lt;/script&gt;       &lt;/html&gt;   The link to jQuery is correct.  I now have a solution by which I simply add the normal script tag like so:  &lt;script type="text/javascript" src="/sites/the_new_abc_portal/custom/jquery-1.10.2.min.js"&gt;&lt;/script&gt;  Works like a charm.  Now my questions:   Is there any objection against my "fix" Why doesn't it work in the first place?