I have this simple code:  $("#additional-room").hide();  var numAdd = 0; $("#add-room").click(function(e) {     e.preventDefault();     $("#additional-room").show("");      if (numAdd &gt;= 3) return;     numAdd++;     $('#additional-room').append('&lt;p&gt;&lt;input type="text" placeholder="room"&gt;&lt;/input&gt;&lt;a href="#"&gt;delete&lt;/a&gt;&lt;/p&gt;'); });  $("#additional-room a").click(function(e) {     e.preventDefault();     $(this).parent().remove();     numAdd--;     if (numAdd &lt; 1) $("#additional-room").hide(""); });   it should add input field when required, however the remove fuction doesn't work. I'm sure it's a simple function but I don't understand why it doesn't work. Please help  Js fiddle:
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.
5844
I have an input type="image". This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this input-image is paired with, I setup an event handler for the input-image. Then when the user clicks the image, they get a little popup to add some notes to the data.  My problem is that when a user enters a zero into the text box, I need to disable the input-image's event handler. I have tried the following, but to no avail.  $('#myimage').click(function { return false; });
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);
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?
9926
What is the best method in jQuery to add an additional row to a table as the last row?  Is this acceptable?  $('#myTable').append('&lt;tr&gt;&lt;td&gt;my data&lt;/td&gt;&lt;td&gt;more data&lt;/td&gt;&lt;/tr&gt;');   Are there limitations to what you can add to a table like this (such as inputs, selects, number of rows)?
63162
Let's say:  &lt;div&gt;   pre text   &lt;div class="remove-just-this"&gt;     &lt;p&gt;child foo&lt;/p&gt;     &lt;p&gt;child bar&lt;/p&gt;     nested text   &lt;/div&gt;   post text &lt;/div&gt;   to this:  &lt;div&gt;   pre text   &lt;p&gt;child foo&lt;/p&gt;   &lt;p&gt;child bar&lt;/p&gt;   nested text   post text &lt;/div&gt;   I've been figuring out using Mootools, jQuery and even (raw) JavaScript, but couldn't get the idea how to do this.
1554
I need to warn users about unsaved changes before they leave a page (a pretty common problem). window.onbeforeunload = handler  This works but it raises a default dialog with an irritating standard message that wraps my own text. I need to either completely replace the standard message, so my text is clear, or (even better) replace the entire dialog with a modal dialog using jQuery. So far I have failed and I haven't found anyone else who seems to have an answer. Is it even possible? Javascript in my page: &lt;script type=&quot;text/javascript&quot;&gt;        window.onbeforeunload = closeIt; &lt;/script&gt;  The closeIt() function: function closeIt() {   if (changes == &quot;true&quot; || files == &quot;true&quot;)   {       return &quot;Here you can append a custom message to the default dialog.&quot;;   } }  Using jQuery and jqModal I have tried this kind of thing (using a custom confirm dialog): $(window).beforeunload(function () {     confirm('new message: ' + this.href + ' !', this.href);     return false; });  which also doesn't work - I cannot seem to bind to the beforeunload event.
17026
I have a JavaScript widget which provides standard extension points. One of them is the beforecreate function. It should return false to prevent an item from being created.   I've added an Ajax call into this function using jQuery:  beforecreate: function (node, targetNode, type, to) {   jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),    function (result) {     if (result.isOk == false)          alert(result.message);   }); }   But I want to prevent my widget from creating the item, so I should return false in the mother-function, not in the callback. Is there a way to perform a synchronous AJAX request using jQuery or any other in-browser API?
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.
60693
I'm using stackoverflow.com with JavaScript off. I accept this comes with somewhat less functionality, however for the most part SO works fine.  If I look at the home page (), every single button on there except for two types works with JS off.  The first second is that the "x Votes; y answers;z views" mouse-over indicates they're links but clicking them does nothing. This one is less of an issue because the user can still click the question title, and they're only implied buttons anyway.  The second (and bigger) issue is the "Add" buttons next to "Favorite Tags" and "Ignored Tags". These are explicit buttons that don't do anything with JS off. There is no working JS substitute for them (the "tag subscriptions" link itself works, but the page it goes to doesn't work with JS off, but that's another bug report).
49395
In jQuery when you do this:  $(function() {    alert("DOM is loaded, but images not necessarily all loaded"); });   It waits for the DOM to load and executes your code. If all the images are not loaded then it still executes the code. This is obviously what we want if we're initializing any DOM stuff such as showing or hiding elements or attaching events.  Let's say though that I want some animation and I don't want it running until all the images are loaded. Is there an official way in jQuery to do this?  The best way I have is to use &lt;body onload="finished()"&gt;, but I don't really want to do that unless I have to.  Note: There is a  in Internet Explorer which actually does wait for all images to load before executing code inside $function() { }. So if you're using that platform you'll get the behavior I'm looking for instead of the correct behavior described above.
22621
I have done the following code in JavaScript to put focus on the particular element (branch1 is a  element),  document.location.href="#branch1";   But as I am also using jQuery in my web app, so I want to do the above code in jQuery. I have tried but don't know why its not working,  $("#branch1").focus();   The above jquery (focus()) code is not working for div, whereas If i am trying the same code with textbox, then its working,  Please tell me, how can I put focus on a div elemnt using jQuery?  Thanks!
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;
85789
I'm trying to use this code to replace spaces with _, it works for the first space in the string but all the other instances of spaces remain unchanged. Anybody know why?  function updateKey() {     var key=$("#title").val();     key=key.replace(" ","_");     $("#url_key").val(key); }
101975
I'm building a plugin that has a meta box. Some of the fields in the meta box are required. Is using jQuery the only method for achieving this? Can I require that a field is filled in using PHP?
73555
I am currently trying to write javascript within a script editor to hide the 'View Properties' and 'Edit Properties' items in the ECB.  I have found many solutions that edit the core.js file. However, that is not preferable for me as there are multiple sites adn this is not for every site and every library. Eventually this will be applied to a certain library but right now I would just like this to work in general before I worry about that.  I have tried removing the item when the menu is loaded using the below javascript. Where #mp6_0_3 is the id of the 'Edit Properties' menu item.  &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt; &lt;/script&gt;   &lt;script language="javascript" type="text/javascript"&gt;  $(document).ready(function() {     $('.ms-core-menu-list').live('mouseover', function() {         $('#mp6_0_3').parent().hide();         $('#mp6_0_3').remove();            }); }); &lt;/script&gt;
21618
I'm trying to add AJAX callback to form element that was previously rendered by AJAX but with no luck. Code below.   A bit of description. There are three main methods here:   buildForm - base form extraField - AJAX callback attached to ['month'] choosePerson - AJAX callback attached to: ['week_day']['hour']   In the buildForm method I create base form with AJAX callback on 'month' select element. In the AJAX callback you can find an extraField method. This method contains form element called 'hour' ($form['week_day']['hour']) and this element renders well. But this element also contains AJAX callback, which doesn't work, it does not generate 'person_container' element and the 'person' select.   Any idea how to ajaxify elements that previously were rendered by ajax?  class ReservationForm extends FormBase {    public function getFormId() {     return 'reservation_form';   }    public function buildForm(array $form, FormStateInterface $form_state) {      $form['month'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Select month'),       '#options' =&gt; array($this-&gt;t('January'), $this-&gt;t('February'), $this-&gt;t('March')),       '#ajax' =&gt; array(         'callback' =&gt; array($this, 'extraField'),         'event' =&gt; 'change',         'wrapper' =&gt; 'week-day',       ),     );      // Disable caching on this form.     $form_state-&gt;setCached(FALSE);      $form['week_day'] = [       '#type' =&gt; 'container',       '#attributes' =&gt; ['id' =&gt; 'week-day'],     ];   }    public function extraField(array &amp;$form, FormStateInterface $form_state) {     $month = $form_state-&gt;getValue('month');      $hour_options = array();      if ($month == '0') {       $hour_options[0] = $this-&gt;t('08:00');       $hour_options[1] = $this-&gt;t('09:00');       $hour_options[2] = $this-&gt;t('10:00');     }      if ($month == '1') {       $hour_options[0] = $this-&gt;t('12:00');       $hour_options[1] = $this-&gt;t('13:00');       $hour_options[2] = $this-&gt;t('14:00');     }      if ($month == '2') {       $hour_options[0] = $this-&gt;t('18:00');       $hour_options[1] = $this-&gt;t('19:00');       $hour_options[2] = $this-&gt;t('20:00');     }      $form['week_day']['hour'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Choose hours @month', array('@month' =&gt; $month)),       '#options' =&gt; $hour_options,       '#ajax' =&gt; array(         // tried with that callback too: [ $this, 'choosePerson']         'callback' =&gt; array($this, 'choosePerson'),         'event' =&gt; 'change',         'wrapper' =&gt; 'person',       ),     );      $form['week_day']['person_container'] = array(       '#type' =&gt; 'container',       '#attributes' =&gt; ['id' =&gt; 'person-container'],     );      $form['week_day']['person_container']['person'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Choose person'),       '#options' =&gt; ['John', 'Sarah', 'Peter'],     );      return $form['week_day'];   }    public function choosePerson(array &amp;$form, FormStateInterface $form_state) {     $form['week_day']['person_container']['person'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Choose person'),       '#options' =&gt; ['John', 'Sarah', 'Peter'],     );     return $form['week_day']['person_container'];   } }