I am having a hard time getting my delete button to remove an item dynamically. When I add a new ingredient the button appears but does not have functionality.  $(document).ready(function () {         getRecipe();         $(".btn-primary").on("click", addIngredient);         $(".btn-default").on("click", deleteIngredient);     });      var recipe = {         title: "Pizza",         servings: 4,         ingredients: ["cheese", "sauce", "flour", "pepperoni"]     };      var button = "&lt;button type=\"button\" class=\"btn btn-default delete btn-xs\"&gt;&lt;span class=\"glyphicon glyphicon-minus-sign\"&gt;&lt;/span&gt;&lt;/button&gt;";      function getRecipe() {           $("#title").append(recipe.title);         $("#servings").append(recipe.servings);           for (var i = 0; i &lt; recipe.ingredients.length; i++) {             $("#ingredients ul").append("&lt;li&gt;" + recipe.ingredients[i] + " " + button + "&lt;/li&gt;");          };     };      function addIngredient() {         var newIngredient = $(".form-control").val();         $(".form-control").val(newIngredient);         $("#ingredients ul").append("&lt;li&gt;" + newIngredient + " " + button + "&lt;/li&gt;");      };      function deleteIngredient() {         $(this).closest("li").remove();     };
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.
92276
I have a form that is dynamically generated, and has dynamically generated id's (and potentially classes). The forms are the same but they have the related id tacked on to the end.  How can I select each set of inputs and apply code to each one?  I was experimenting with $('input[id^=@id_airline_for_]') but could not get it to fly. I suspect I am missing some fundamental jQuery knowledge that is holding me back since I am sure this is a common problem with dynamic forms.   &lt;form method='POST'&gt;     &lt;label for="id_airline_for_8"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="airline_for_8"/&gt;     &lt;label for="id_flight_number_for_8"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="flight_number_for_8"/&gt;      &lt;label for="id_airline_for_17"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="airline_for_17"/&gt;     &lt;label for="id_flight_number_for_17"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="flight_number_for_17"/&gt;      -- snip --  &lt;/form&gt;   EDIT: I should update that i want to be able to perform some action when the input is clicked but only for classes with a matching id at the end.  To make it easy, lets say I want all inputs with a matching id at the end of the #id to disappear when one is clicked (just for arguments sake).
80790
If I have a list like this:  &lt;ul id="mylist"&gt;     &lt;li id="list-item1"&gt;text 1&lt;/li&gt;     &lt;li id="list-item2"&gt;text 2&lt;/li&gt;     &lt;li id="list-item3"&gt;text 3&lt;/li&gt;     &lt;li id="list-item4"&gt;text 4&lt;/li&gt; &lt;/ul&gt;   What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie)  E.g.  &lt;ul id="mylist"&gt;     &lt;li id="list-item3"&gt;text 3&lt;/li&gt;     &lt;li id="list-item4"&gt;text 4&lt;/li&gt;     &lt;li id="list-item2"&gt;text 2&lt;/li&gt;     &lt;li id="list-item1"&gt;text 1&lt;/li&gt; &lt;/ul&gt;
98571
To create a new event handler on a control you can do this  c.Click += new EventHandler(mainFormButton_Click);   or this  c.Click += mainFormButton_Click;   and to remove an event handler you can do this  c.Click -= mainFormButton_Click;   But how do you remove all event handlers from an event?
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;
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;
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?
72015
If you are looking at an answer with a code snippet in it, and the answerer updates the answer, you see An edit has been made (etc.). If you click that, the answer is refreshed, but the code snippet buttons (Run, Copy, and Expand) go missing.  The code snippet buttons are there again after reloading the entire page.  Answer has been edited:        After clicking to reload it:        Similarly, non-snippet code blocks do not receive syntax highlighting after an edit, as described , which refers to  as a related or root cause.  (Browser: Chrome v77 - OS: Windows 10 Pro x64)
72487
I have an HTML element with a large collection of unordered lists contained within it. I need to clone this element to place elsewhere on the page with different styles added (this is simple enough using jQuery).    $("#MainConfig").clone(false).appendTo($("#smallConfig"));   The problem, however, is that all the lists and their associated list items have IDs and clone duplicates them. Is there an easy way to replace all these duplicate IDs using jQuery before appending?
76034
Im sure this is an easy question, just not for me because of lack of experience with the Drupal preprocess hooks. I am removing the standard "Read More" links from my content. I want the ability to replace them with a css button. I can do that, the tricky part come when I want to use a FIELD from the CONTENT TYPE, as the name for the button.   function bootstrap_preprocess_node(&amp;$variables) {   unset($variables['content']['links']['node']['#links']['node-readmore']);     $variables['newreadmore'] = t('&lt;span class="newreadmore"&gt; &lt;a href="!title" class="btn          btn-info" &gt;'.$readmoretext.'&lt;/a&gt; &lt;/span&gt;',    array(     '!title' =&gt; $variables['node_url'],   ) ); }   My question is how can i HOOK into the node and retrieve the field for my variable $readmoretext  Thanks!
114745
I am trying to Preview and download document from LWC, From apex controller i am returning Map&lt;> contains ID and Document name, and iteration that map data in html file and passing map.key value to href url, but dynamic is not populating in URL.    &lt;template for:each={mapData} for:item="mapkey"&gt;                            Test: {mapkey.key}                                                         &lt;lightning-button-icon key={mapkey} icon-name="utility:download"  variant="bare" alternative-text="Settings"&gt;&lt;/lightning-button-icon&gt;                                &lt;a key={mapkey} style="color: #000000"  href ="/sfc/servlet.shepherd/document/download/{mapkey.Key}?operationContext=S1" target="_blank" preview= "{mapkey.value}"&gt;{mapkey.value}&lt;/a&gt;                          &lt;/template&gt;    JS Code:      .then(data =&gt; {            /// var conts = data;                   console.log('data map---&gt;'+data);     if(data){     // eslint-disable-next-line guard-for-in     for(let key in data) {    this.mapData.push({value: data[key], key:key}); //Here we are creating the array to show on UI.    }       } })   Apex Code:   @auraenabled /* Method will return a Map Contains Document ID and Name */ public static Map&lt;string,string&gt; getUrls( string searchstr){     Map&lt;string,string&gt; contdocidandtitle = new Map&lt;string,string&gt;();     system.debug('searchstr'+searchstr);             For(Document cd :[select id,folderid,name from document where folder.name =:searchstr]){         contdocidandtitle.put(cd.id,cd.name);                 }     return contdocidandtitle; }   Error is: sfc/servlet.shepherd/document/download/%7Bmapkey.Key%7D?operationContext=S1 in URL "mapkey.key" priniting instead of ID Help me with valuable suggestions.
107230
I need to do some custom theming on the search block in Drupal 7.  Specifically, I need to add a class to the submit button that makes it invisible and removes it from the content flow.  So:  &lt;div class="form-actions form-wrapper" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   Becomes...  &lt;div class="form-actions form-wrapper element-invisible" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   I added element-invisible to the edit-actions div element.  However, I can't figure out how to do this.  What's the best practice for doing this sort of thing?
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?
48477
I am creating a new custom button or link, and when i try to use a Visualforce page my content dropdown list is empty. How do i get a VF page to trigger on a custom button or link.
39132
I created a custom button for custom object to place in the related list. The custom object has two look-ups, one for case and one for account. This button, when clicked, should open in a new window to save a record of the custom object, with the default values for each look-up to populate automatically depending on the record where the button was clicked. It works for every record so far, except one case. It then throws the error: A problem with the Onclick Javascript for this button or link was encountered: Unexpected identifier.  I couldn't find any differences between records where it works and doesn't.  Code:  window.open('a2U/e?CF00N600000037HI4={!Account.Name}&amp;CF00N600000037HI4_lkid={!Account.Id}&amp;retURL=%2F{!Account.Id}&amp;CF00N600000037HI5={!Case.CaseNumber}&amp;CF00N600000037HI5_lkid={!Case.Id}&amp;retURL=%2F{!Case.Id}','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=yes,location=yes,status=yes');
28556
I have a rogue item on my menu bar from a terrible piece of printer/scanner software. I long ago removed the app, but the button for the app remains in the menu bar.   Is there any central way for me to remove an item from the menu bar? Any plist I can hack? command line trick, etc?  It's the one to the left of the Facebook icon:    (I tried holding Command and dragging it away, but it doesn't seem to respect that convention.)
38310
Given the following classes and controller action method:  public School {   public Int32 ID { get; set; }   publig String Name { get; set; }   public Address Address { get; set; } }  public class Address {   public string Street1 { get; set; }   public string City { get; set; }   public String ZipCode { get; set; }   public String State { get; set; }   public String Country { get; set; } }  [Authorize(Roles = "SchoolEditor")] [AcceptVerbs(HttpVerbs.Post)] public SchoolResponse Edit(Int32 id, FormCollection form) {   School school = GetSchoolFromRepository(id);    UpdateModel(school, form);    return new SchoolResponse() { School = school }; }   And the following form:  &lt;form method="post"&gt;   School: &lt;%= Html.TextBox("Name") %&gt;&lt;br /&gt;   Street: &lt;%= Html.TextBox("Address.Street") %&gt;&lt;br /&gt;   City:  &lt;%= Html.TextBox("Address.City") %&gt;&lt;br /&gt;   Zip Code: &lt;%= Html.TextBox("Address.ZipCode") %&gt;&lt;br /&gt;   Sate: &lt;select id="Address.State"&gt;&lt;/select&gt;&lt;br /&gt;   Country: &lt;select id="Address.Country"&gt;&lt;/select&gt;&lt;br /&gt; &lt;/form&gt;   I am able to update both the School instance and the Address member of the school.  This is quite nice!  Thank you ASP.NET MVC team!  However, how do I use jQuery to select the drop down list so that I can pre-fill it?  I realize that I could do this server side but there will be other dynamic elements on the page that affect the list.  The following is what I have so far, and it does not work as the selectors don't seem to match the IDs:  $(function() {   $.getJSON("/Location/GetCountryList", null, function(data) {     $("#Address.Country").fillSelect(data);   });   $("#Address.Country").change(function() {     $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {       $("#Address.State").fillSelect(data);     });   }); });