I want to add a remove button in my clone element for some purposes.  HTML    &lt;div class="more"&gt;add&lt;/div&gt;         &lt;div id="other_fee"&gt;          &lt;div&gt;           &lt;input type="text" value="" name="other" placeholder="Description" /&gt;           &lt;input class="short3 theAmount" type="text" value="" name="other_amount" placeholder="Amount" /&gt;           &lt;div class="inputBlocker"&gt;&lt;/div&gt;          &lt;/div&gt;         &lt;/div&gt;   jquery   &lt;script type="text/javascript"&gt;       jQuery(function($) {         $('.more').on('click', function() {           var $table = $('#other_fee');           var $tr = $table.find('div').eq(0).clone();           $tr.appendTo($table).find('input').val('');         });          $("#abc").each(function() {           var form = $(this);            form.on('keyup', '.theAmount', function() {             var sum = 0;             form.find('.theAmount').each(function() {               sum += +this.value;             });              form.find("#other_total").val(sum);           });         });       });    &lt;/script&gt;
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.
43168
Let's say you create a wizard in an HTML form. One button goes back, and one goes forward. Since the back button appears first in the markup when you press Enter, it will use that button to submit the form.  Example:    &lt;form&gt;   &lt;!-- Put your cursor in this field and press Enter --&gt;   &lt;input type="text" name="field1" /&gt;    &lt;!-- This is the button that will submit --&gt;   &lt;input type="submit" name="prev" value="Previous Page" /&gt;    &lt;!-- But this is the button that I WANT to submit --&gt;   &lt;input type="submit" name="next" value="Next Page" /&gt; &lt;/form&gt;     I would like to get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the wizard will move to the next page, not the previous. Do you have to use tabindex to do this?
104040
&lt;div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide"       style="width: 60%; margin: auto; "&gt;     &lt;div class="slds-m-bottom--xx-large"&gt;&lt;/div&gt;     &lt;div class="slds-modal__container"&gt;         &lt;div class="slds-modal__header"&gt;             &lt;button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}"&gt;                 &lt;span class="slds-assistive-text"&gt;Close&lt;/span&gt;             &lt;/button&gt;             &lt;h2 class="slds-text-heading--medium"&gt;Create Opportunity&lt;/h2&gt;         &lt;/div&gt;         &lt;div class="slds-modal__content slds-p-around--medium"&gt;             &lt;div class="slds-m-top--xx-large"&gt;&lt;/div&gt;         &lt;/div&gt;         &lt;div class="slds-modal__footer"&gt; &lt;button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}"&gt;Cancel&lt;/button&gt;             &lt;ui:button class="slds-button slds-button--brand" press="{!c.saveOpportunity}" label="Save" /&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/div&gt;  &lt;div class="slds-backdrop slds-backdrop--open slds-hide" id="backGroundSectionId"&gt;&lt;/div&gt;   Controller  //for showing modal $A.util.removeClass(component.find("newClientSectionId"), "slds-hide"); $A.util.removeClass(component.find("backGroundSectionId"), "slds-hide");   CSS  .THIS.slds-hide {    display:none; }
47720
I would like to change all the names of the attributes where class="testingCase" throughout all my whole html document.  e.g. Change:  &lt;a class="testingCase" href="#" title="name of testing case"&gt;Blabla&lt;/a&gt; &lt;a class="testingCase" href="#" title="name of another testing case"&gt;Bloo&lt;/a&gt;   To this:   &lt;a class="testingCase" href="#" newTitleName="name of testing case"&gt;Blabla&lt;/a&gt;` &lt;a class="testingCase" href="#" newTitleName="name of another testing case"&gt;Bloo&lt;/a&gt;`   I was thinking of a find and replace but that seems a lot of code for something so easy. Is there a jQuery function for this or a simple method?
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!
32205
Consider the following:  &lt;div onclick="alert('you clicked the header')" class="header"&gt;   &lt;span onclick="alert('you clicked inside the header');"&gt;something inside the header&lt;/span&gt; &lt;/div&gt;   How can I make it so that when the user clicks the span, it does not fire the div's click event?
97605
what is the code to disable an INPUT text box for HTML?  Thanks
73102
I am having problem while looping.  I am always getting an extra button. Please help.   {this.state.items.map(myitems1 =&gt; {     return (        &lt;div key={myitems1.Id}&gt;            &lt;span&gt;{myitems1.Item_x0020_Name}&lt;/span&gt;            &lt;button onClick={e =&gt; this.dosometing(myitems1.Id)}&gt;Offline&lt;/button&gt;        &lt;/div&gt;     ); })}   I can see the collection has only three (3) values, But I am getting 4 buttons on screen.   Getting always extra
103418
HTML  more code here...  &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://example.com/sites/all/modules/ac_modules/ac_exercise/ac_exercise.js?nkuo2r"&gt;&lt;/script&gt;   more code here...  &lt;div class="form-item form-type-textfield form-item-time-start"&gt;   &lt;label for="edit-time-start"&gt;Time Start &lt;/label&gt;  &lt;input type="text" id="edit-time-start" name="time_start" value="11:28:12" size="4" maxlength="8" class="form-text" /&gt; &lt;/div&gt;   more code here...  Javascript - ac_exercise.js  $(document).ready(function(){    $("#edit-time-start").on("change paste keyup", function() {      alert($(this).val());    }); });   In Chrome's console I get the following error: Uncaught TypeError: undefined is not a function - ac_exercise.js?nkuo2r:1 which is this line of code:  $(document).ready(function(){
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.
16580
I am making an expand/collapse call rates table for the company I work for. I currently have a table with a button under it to expand it, the button says "Expand". It is functional except I need the button to change to "Collapse" when it is clicked and then of course back to "Expand" when it is clicked again. The writing on the button is a background image.  So basically all I need is to change the background image of a div when it is clicked, except sort of like a toggle.
74715
I have several input and option elements on my page, each (well almost) have an event attached to update some text on the page once they change. I use jQuery which is really really cool :)   I also use Microsofts  framework, utilizing the UpdatePanel. The reason why I do that is that certain elements are created on the page based on some server-side logic. I don't really want to explain why I use the UpdatePanel - even if it could (it can with quite some effort) be rewritten to use only  I still want that UpdatePanel.  You probably guessed it - once I have a postback on the UpdatePanel the jQuery events stops working. I actually was expecting this, since the "postback" is not really a new postback so my code in document.ready that binds the events won't be fired again. I also confirmed my suspicion by reading up on it in the jQuery help libraries.  Anyway I'm left with the problem of rebinding my controls after the UpdatePanel is done updating the . I preferably need a solution that does not require adding more .js files (jQuery plug-ins) to the page but something as simple as being able to catch the UpdatePanel's 'afterupdating' where I can just call my method to rebind all the form elements.
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;
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.
73078
Can someone please tell me how to submit an HTML form when the return key is pressed and if there are no buttons in the form? The submit button is not there. I am using a custom div instead of that.
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?
61491
What is the best method for adding options to a &lt;select&gt; from a JavaScript object using jQuery?  I'm looking for something that I don't need a plugin to do, but I would also be interested in the plugins that are out there.  This is what I did:  selectValues = { "1": "test 1", "2": "test 2" };  for (key in selectValues) {   if (typeof (selectValues[key] == 'string') {     $('#mySelect').append('&lt;option value="' + key + '"&gt;' + selectValues[key] + '&lt;/option&gt;');   } }   A clean/simple solution:  This is a cleaned up and simplified :  $.each(selectValues, function(key, value) {      $('#mySelect')           .append($('&lt;option&gt;', { value : key })           .text(value)); });   Changes from matdumsa's: (1) removed the close tag for the option inside append() and (2) moved the properties/attributes into an map as the second parameter of append().