Seeking again your expert opinion on how to remove dynamic elements using jquery? Im currently working on a php page with forms with functionality to add and remove new section. Now im having issues when im trying to remove the newly added section using jquery. As the hyperlink doesn't get triggered.  HTML page:    &lt;div class="form-group"&gt;     &lt;label class="control-label col-md-4"&gt;File upload&lt;/label&gt;     &lt;div class="col-md-6"&gt;       &lt;input type="file" /&gt;       &lt;textarea required placeholder="Description of the document" class="form-control" name="description-of-incident" id="description-of-incident" rows="2"&gt;&lt;/textarea&gt;       &lt;div class="help-block with-errors"&gt;&lt;/div&gt;&lt;br /&gt;       &lt;a href="javascript:void(0);" id="addanother"&gt;Add another&lt;/a&gt;     &lt;/div&gt;   &lt;/div&gt;  &lt;div id="container"&gt; &lt;/div&gt;   and this is the jquery i used:    $(document).ready(function() {       $('input[type="radio"]').click(function() {              if($(this).attr('id') == 'peopleinvolvedyes') {                   $('#involvement-section').show();              }               else {                   $('#involvement-section').hide();              }          });        $("#addanother").click(function(){         $("#container").append('&lt;div class="form-group"&gt;&lt;label class="control-label col-md-4"&gt;File upload&lt;/label&gt;&lt;div class="col-md-6"&gt;&lt;input type="file" /&gt;&lt;textarea required placeholder="Description of the document" class="form-control" name="description-of-incident" id="description-of-incident" rows="2"&gt;&lt;/textarea&gt;&lt;div class="help-block with-errors"&gt;&lt;/div&gt;&lt;a href="javascript:void(0);" class="remove-document-upload"&gt;Remove&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;');       });        $(".remove-document-upload").click(function(){           alert("dasdasdas");         //$(this).closest('.addanother').remove();       });     });   Whenever, i get click on the the 'Remove' hyperlink, the jquery function doesn't get triggered.  Comments and suggestions are high appreciated.  Thanks, Nhoyti
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.
98772
I'm creating a plugin that allows a user to use a shortcode. This shortcode depends on a bunch of javascript that needs to be present once the shortcode loads.  I'm having issues trying to decide when and where to load the javascript. Pieces of the code that the shortcode spits out are elements that need to be present, but aren't available for jQuery to utilize.  Is there a specific way of loading and attaching scripts that a shortcode relies on?  function build_total_search_method( $atts ) {      $shorcode_php_function = include( dirname(__FILE__) . "/includes/total_search.php" );      return $shorcode_php_function;  } add_shortcode( 'total_search', 'build_total_search_method' );   This seems to work, but it also prints a 1 to the page. Is this method okay?
4228
As the question says, how do I add a new option to a DropDownList using jQuery?  Thanks
52925
I built a custom form that saves the data to multiple lists with on click; it works pretty well for its intended use (keeping the data related). Thing is I am totally new at jQuery and SPServices, but am learning.   I would like to know if SPService/jQuery will allow me to use the aspx control to upload a single document to a library? I have seen plugins out there for multiple file uploads so I assume this is possible, but all of these seem way to much for what I am trying to do, and I would like to learn how to do it.  Does anyone know if this is possible? Could provide simple example or explanation or reference?  Appreciate it as always!
26508
I have an SP2013 wiki page that I want to use a jQuery accordion on.  Just with some static content, not pulling any information from anywhere in SharePoint.  I created the page, inserted a script editor web part at the top, and inserted this snippet:  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt; &lt;script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script&gt;     $(function () {         $("#accordion").accordion({collapsible: true, active: false, icons:false });     }); &lt;/script&gt;   Then, I put the cursor under the script editor web part, and clicked on "Edit Source".  Then underneath the HTML that represents the script editor, I put this HTML (basically the jQuery accordion demo HTML):  &lt;div id="accordion"&gt;    &lt;h3&gt;       Section 1    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 2    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 3    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 4    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.&lt;/p&gt;       &lt;p&gt;Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&lt;/p&gt;    &lt;/div&gt; &lt;/div&gt;   After I saved the page, the accordion collapsed initially (as it is supposed to), but clicking on any of the headers does not expand the section.  If I go back into edit mode for the page, it works as expected - clicking a header expands the section.  Save it again, and it stops working.  What am I missing?  I don't think what I'm trying to do is all that complicated...  EDIT 12/8: Ok, so I put the jQuery and jQuery UI scripts in the site's Site Assets folder, and the behavior is the same -- the scripts do not get loaded in IE or Firefox unless the page is in Edit mode.  Incidentally I think the other script snippet, where I hook up the accordion, is also not getting loaded unless the page is in edit mode.  The reason I think this is that I changed the way I referenced the main jQuery script (to something that didn't work), and the debugger halted on $(function () { ...., saying $ was undefined.  So if jQuery is not loaded, and the debugger thinks $ is undefined, at least it's hitting that section of code.  Which makes me think that in non-edit mode, not only is jQuery not getting loaded, but that section of script is not getting loaded either, because the debugger is not choking on $.  Can anyone provide any insight as to why the Script Editor web part seems to be not working in IE and Firefox?  (Because apparently in Chrome it works fine.)
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.
67655
Does anyone know how to select an item in the DOM by ID with jQuery, when that ID has a space?   For example, the ID of my item would be  &lt;div id="content Module"&gt;Stuff&lt;/div&gt;   How would I select this with jQuery?   If I just do   $("#content Module").whatever()    jQuery will try to find an item with both the ID of content and the ID of Module, which is not what I am looking for.  I should add that I am working with an old code base where these two word ids are used extensively, so going through and changing all the IDs would be bad.
10734
I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example:  $(function() {         $('div._Foo').bind("mouseover", function(e) {         // Do something exciting     });     });   Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel.   What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? Should I be using the ASP.NET ajax lifecycle instead of $(document).ready?
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?
74429
I want to disable the hyperlink for a specific class part of Site Feeds in SharePoint 2013.  I`m using Jquery to do the same, but it is not working for me. Code for reference  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;     var location= $('.ms-microfeed-userName ms-textLarge ms-subtleLink').attr("href");  $(".ms-microfeed-userName ms-textLarge ms-subtleLink").removeAttr('href');  $('ul').addClass('expanded');  $('ul.expanded').fadeIn(300);  $(".ms-microfeed-userName ms-textLarge ms-subtleLink").attr("href", location);    &lt;/script&gt;
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.
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.
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?
92799
Several of my pages use both JQuery and Protoype. Since I upgraded to version 1.3 of JQuery this appears to be causing problems, because both libraries define a function named '$'.  JQuery provides a function noConflict() which relinquishes control of $ to other libraries that may be using it. So it seems like I need to go through all my pages that look like this:  &lt;head&gt;           &lt;script type="text/javascript" src="/obp/js/prototype.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript" src="/obp/js/jquery.js"&gt;&lt;/script&gt; &lt;/head&gt;   and change them to look like this:  &lt;head&gt;           &lt;script type="text/javascript" src="/obp/js/prototype.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript" src="/obp/js/jquery.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript"&gt;         jQuery.noConflict();         var $j = jQuery;     &lt;/script&gt; &lt;/head&gt;   I should then be able to use '$' for Prototype and '$j' (or 'jQuery') for JQuery. I'm not entirely happy about duplicating these 2 lines of code in every relevant page, and expect that at some point somebody is likely to forget to add them to a new page. I'd prefer to be able to do the following    Create a file jquery-noconflict.js which "includes" jquery.js and the 2 lines of code shown above Import jquery-noconflict.js (instead of jquery.js) in all my JSP/HTML pages   However, I'm not sure if it's possible to include one JS file in another, in the manner I've described? Of course an alternate solution is simply to add the 2 lines of code above to jquery.js directly, but if I do that I'll need to remember to do it every time I upgrade JQuery.
20484
Recently I've been doing a lot of modal window pop-ups and what not, for which I used jQuery. The method that I used to create the new elements on the page has overwhelmingly been along the lines of:   $("&lt;div&gt;&lt;/div&gt;");   However, I'm getting the feeling that this isn't the best or the most efficient method of doing this. What is the best way to create elements in jQuery from a performance perspective?   has the benchmarks to the suggestions below.
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 !!!!
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.