How can I run the jQuery script for new created DOM elements? Look at the following code, if I click the class .elem it will run the code, but if I append new .elem the script won't run.  JS:  $('.elem').on('click', function(){     $('.result').show().fadeOut('slow'); }); $('.add').on('click', function(){     $('.block').append('&lt;div class="elem"&gt;Element&lt;/div&gt;'); });   HTML:  &lt;div class="block"&gt;     &lt;div class="elem"&gt;Element&lt;/div&gt;     &lt;div class="elem"&gt;Element&lt;/div&gt;     &lt;div class="elem"&gt;Element&lt;/div&gt; &lt;/div&gt;  &lt;p&gt;&lt;span class="add"&gt;Add new&lt;/span&gt;&lt;/p&gt;  &lt;div class="result"&gt;Result&lt;/div&gt;   JSFiddle here:   Any help is hightly appreciated. Thanks you;
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.
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.
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?
114929
I want to use jQuery to parse RSS feeds. Can this be done with the base jQuery library out of the box or will I need to use a plugin?
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.
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?
72086
I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.  var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv;  var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t);   I would like to know if there is a better way to do this using jQuery. I've been experimenting with:  var odv = $.create("div"); $.append(odv); // And many more   But I'm not sure if this is any better.
23360
I want to use jQuery inside a firefox extension, I imported the library in the xul file like this:  &lt;script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"&gt; &lt;/script&gt;   but the $() function is not recognized in the xul file neither do the jQuery().  I googled about the problem and found some solutions but no one did work with me:    I've also tried to pass the 'content.document' object(which refrences the 'document' object) as the context parameter to the jQuery function like this:  $('img',content.document);   but still not working, does any one came across this problem before?
84374
I’ve had a good look and can’t seem to find out how to select all elements matching certain classes in one jQuery selector statement such as this:  $('.myClass', '.myOtherClass').removeClass('theclass');   Any ideas on how to achieve this? The only other option is to do  $('.myClass').removeClass('theclass'); $('.myOtherClass').removeClass('theclass');   But I’m doing this with quite a few classes, so it requires much code.
123115
What's the best way to get a regular anchor (&lt;a href="..."&gt;) to submit the form it is embedded in when clicked?  &lt;form&gt;     &lt;ul&gt;         &lt;li&gt;             &lt;p&gt;                 The link could be &lt;span&gt;embedded &lt;a href="" onclick="?"&gt;at any level&lt;/a&gt;&lt;/span&gt;                 in the form, so "this.parentNode.parentNode..." is no good. :(             &lt;/p&gt;         &lt;/li&gt;     &lt;/ul&gt; &lt;/form&gt;   I know that the easiest way using jQuery would be  $('#myLink').click(function() {     $(this).parents('form:first').submit(); });   ...but I'm trying to find a way to do this without using a library.    Edit: I'm really trying to find a method which doesn't require knowledge of the form (eg: its name, id, etc). This would be similar to how you could put this on an input element: &lt;input onclick="this.form.submit()" /&gt;
116319
I am trying to add jQuery to my page (it is not being added by default). The file is adding to the page but after drupal.js causing the error:  SCRIPT5009: 'jQuery' is undefined  drupal.js, line 5 character 1    The code that adds drupal.js to the page in common.inc  ... 'misc/drupal.js' =&gt; array(           'data' =&gt; 'misc/drupal.js',           'type' =&gt; 'file',           'scope' =&gt; 'header',           'group' =&gt; JS_LIBRARY,           'every_page' =&gt; TRUE,           'weight' =&gt; -1,           'preprocess' =&gt; TRUE,           'cache' =&gt; TRUE,           'defer' =&gt; FALSE,         ), ...   In my module hook_init I have:    drupal_add_js('misc/jquery.js', array(     'group' =&gt; JS_LIBRARY,     'weight' =&gt; -20,     'cache' =&gt; TRUE,   ));   I would think with a lower weight it would load before drupal.js?  The header of the page contains the following scripts:  &lt;script type="text/javascript" src="http://mysite.com/misc/drupal.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/misc/jquery.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/misc/jquery.once.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/default/files/languages/nl_c9aC92_wtuULa79-hTFcGPM53oqk1yKwciOa_Q3yO28.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/all/modules/lang_dropdown/msdropdown/jquery.dd.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/all/modules/lang_dropdown/lang_dropdown.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/all/modules/devel/devel_krumo_path.js?mqdxrf"&gt;&lt;/script&gt;
20031
I'm following :   But in my real code, I've used google tag manager to manage google analytics. So I have just one script in the head of my website which belongs to gtm:  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P8F58CT');  ga('create', 'UA-124402662-1', 'auto'); // Uncaught ReferenceError: ga is not defined   As you can see, I've added ga('create', 'UA-124402662-1', 'auto') right after that google tag manager (the same as the tutorial I've linked in the first line of my question). And I have a ga('send', 'pageview', newURL); code which will be executed when the page changes using ajax.  The problem is it throws: (as I've commented in code above)     Uncaught ReferenceError: ga is not defined   How can I fix it? Someone told me no need to add ga('create', 'UA-124402662-1', 'auto'); at all, and gtm will handle it all. But in my tests:   When I open my website (homepage), and run ga('send', 'pageview', "/adv"); in the console, nothing changes in google analytics and it still points to the homepage. When I open my website (homepage), and run ga('create', 'UA-124402662-1', 'auto'); and then run ga('send', 'pageview', "/adv");, then the google analytics will be changed to the /adv (not homepage anymore). So I believe ga('create', 'UA-124402662-1', 'auto'); is needed. But why it is undefined?
116497
Let me describe the problem in details:  I want to show an absolute positioned div when hovering over an element. That's really simple with jQuery and works just fine. But when the mouse goes over one of the child elements, it triggers the mouseout event of the containing div. How do I keep javascript from triggering the mouseout event of the containing element when hovering a child element.   What's the best and shortest way to do that with jQuery?  Here is a simplified example to illustrate what I mean:  Html:  &lt;a&gt;Hover Me&lt;/a&gt; &lt;div&gt;   &lt;input&gt;Test&lt;/input&gt;   &lt;select&gt;     &lt;option&gt;Option 1&lt;/option&gt;     &lt;option&gt;Option 2&lt;/option&gt;   &lt;/select&gt; &lt;/div&gt;   Javascript/jQuery:  $('a').hover( function() { $(this).next().show() }               function() { $(this).next().hide() } );
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.
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); }
113150
I'm making an HTML 5 game. I want mouse clicks on sprites drawn in a canvas element cause events that my code can react to. At the moment, I'm doing it by checking through all of my sprites in a for-loop on each click.  Is there a way to do that by adding an event listener to a sprite so it would respond just like that?  Are Javascript's custom events useful in this situation? I know it's possible with KinectJS, but I don't have any experience with it and really I'd like to learn how to do this myself without the help of a library.
105818
Is it possible to add a new button to an existing panel or an existing node that runs a custom operator?  How can I do this?