The task is , but I write custom code.   Here is my jQuery code:  $(document).ready(function() { $('.add-new-item').click(function(event){     event.preventDefault()     $('table#teant-details tbody').append('&lt;tr&gt;&lt;td&gt;&lt;input class="form-control" type="text"&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="form-control" type="text"&gt;&lt;/td&gt;&lt;td&gt;&lt;a class="btn btn-danger remove-item"&gt;Remove&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;'); });  $('.remove-item').click(function(e){     console.log('Hello!'); // DEBUG      // BUG: If I click an element to remove, that make by the "Add new item" button, then does not work the "Remove" button.     $("tr:hover").remove(); });   });  And my HTML code:   &lt;div class="col-md-12"&gt; &lt;table class="table" id="teant-details"&gt;     &lt;thead&gt;         &lt;tr&gt;             &lt;th&gt;Name&lt;/th&gt;             &lt;th&gt;Value&lt;/th&gt;             &lt;th&gt;Options&lt;/th&gt;         &lt;/tr&gt;     &lt;/thead&gt;     &lt;tbody&gt;         &lt;tr&gt;             &lt;div class="input-wrapper"&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Balazs"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="The Boss"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;a class="btn btn-danger remove-item"&gt;Remove&lt;/a&gt;&lt;/td&gt;             &lt;/div&gt;         &lt;/tr&gt;          &lt;tr&gt;             &lt;div class="input-wrapper"&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Dori"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Python developer"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;a class="btn btn-danger remove-item"&gt;Remove&lt;/a&gt;&lt;/td&gt;             &lt;/div&gt;         &lt;/tr&gt;          &lt;tr&gt;             &lt;div class="input-wrapper"&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Bence"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Python developer"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;a class="btn btn-danger remove-item"&gt;Remove&lt;/a&gt;&lt;/td&gt;             &lt;/div&gt;         &lt;/tr&gt;          &lt;tr&gt;             &lt;div class="input-wrapper"&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Tasi"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;input class="form-control" type="text" value="Front End developer"&gt;&lt;/td&gt;                 &lt;td&gt;&lt;a class="btn btn-danger remove-item"&gt;Remove&lt;/a&gt;&lt;/td&gt;             &lt;/div&gt;         &lt;/tr&gt;     &lt;/tbody&gt; &lt;/table&gt; &lt;div class="row"&gt;     &lt;div class="col-md-6"&gt;         &lt;a class="btn btn-primary save-changes" href="#"&gt;Save changes&lt;/a&gt;     &lt;/div&gt;     &lt;div class="col-md-6"&gt;         &lt;div class="add-new-item-wrapper"&gt;             &lt;a class="btn btn-success add-new-item"&gt;Add new item&lt;/a&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/div&gt;     The bug:If I click an element to remove, that make by the "Add new item" button, then does not work the "Remove" button.
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.
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?
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?
932
Suppose I attach an blur function to an HTML input box like this:  &lt;input id="myInput" onblur="function() { ... }"&gt;&lt;/input&gt;   Is there a way to get the ID of the element which caused the blur event to fire (the element which was clicked) inside the function? How?  For example, suppose I have a span like this:  &lt;span id="mySpan"&gt;Hello World&lt;/span&gt;   If I click the span right after the input element has focus, the input element will lose its focus. How does the function know that it was mySpan that was clicked?  PS: If the onclick event of the span would occur before the onblur event of the input element my problem would be solved, because I could set some status value indicating a specific element had been clicked.  PPS: The background of this problem is that I want to trigger an AJAX autocompleter control externally (from a clickable element) to show its suggestions, without the suggestions disappearing immediately because of the blur event on the input element. So I want to check in the blur function if one specific element has been clicked, and if so, ignore the blur event.
44255
I am trying to insert a chunk of HTML into a div. I want to see if plain JavaScript way is faster than using jQuery. Unfortunately, I forgot how to do it the 'old' way. :P  var test2 = function(){     var cb = function(html){         var t1 = document.getElementById("test2");         var d = document.createElement("div");         d.id ="oiio";         d.innerHtml = html;         t1.appendChild(d);         console.timeEnd("load data with javascript");     };     console.time("load data with javascript");     $.get("test1.html", cb); }   what am i doing wrong here guys?  edit:  Someone asked which is faster, jquery or plain js so i wrote up a test:   plain js is 10% faster
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.
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?
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.
109505
I'm programmatically adding ToolStripButton items to a context menu.  That part is easy.  this.tsmiDelete.DropDownItems.Add("The text on the item.");   However, I also need to wire up the events so that when the user clicks the item something actually happens!  How do I do this? The method that handles the click also needs to receive some sort of id or object that relates to the particular ToolStripButton that the user clicked.
98955
Suppose I have this code: var myArray = new Object(); myArray[&quot;firstname&quot;] = &quot;Bob&quot;; myArray[&quot;lastname&quot;] = &quot;Smith&quot;; myArray[&quot;age&quot;] = 25;  Now if I wanted to remove &quot;lastname&quot;?....is there some equivalent of myArray[&quot;lastname&quot;].remove()? (I need the element gone because the number of elements is important and I want to keep things clean.)
98687
If the user selects an option in a dropdown box, there must be added a label and a textbox. Using appendChild, these elements get added to the end of the container.  var newFreeformLabel = document.createElement('label'); newFreeformLabel.innerHTML = 'Omschrijving:';  var newFreeformField = document.createElement('input'); newFreeformField.className = 'textfield'; newFreeformField.name = 'factuur_orderregel[]';  var newFreeformSpacer = document.createElement('div'); newFreeformSpacer.className = 'spacer';  container.appendChild(newFreeformLabel); container.appendChild(newFreeformField); container.appendChild(newFreeformSpacer);   The issue is that these elements should be inserted at the beginning of container, not at the end.  Is there a solution to this in PrototypeJS?
7928
I wanted to add custom JavaScript code on certain nodes. I have written this code in the html.tpl.php template, but this doesn't work. (donate is the path alias for a node.) &lt;?php if(arg(0) == 'DONATE'): ?&gt;   &lt;script&gt;     (function() {       // ...     );   &lt;/script&gt; &lt;?php endif; ?&gt;
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 !!!!
55718
I need to create a custom list in Sharepoint 2007 using JQuery (only!). I'm using Sharepoint 2007. Is there any way to do it?
1307
I am completely new to coding. I am a teacher and trying to design a lesson planner tool using Google Sheets Scripts. The idea is to have a template sheet for the lesson that will copy into a new tab. That part is working fine. However, to delete the lesson I want to make it impossible for someone to accidentally delete the template. It is succeeding in not deleting the template tab if "Delete Lesson" is clicked.   However, it is displaying the alert that you cannot delete the template for the other tabs (but then deleting the tab as it should) This is the .  Any help is greatly appreciated!  I used this code at first:  function DeleteTab1() {     var spreadsheet = SpreadsheetApp.getActive();     var sheet = spreadsheet.getActiveSheet();     var sheetname = sheet.getName();     if(sheetname != "Template")  {      spreadsheet.deleteActiveSheet();    }    else {       SpreadsheetApp.getUi().alert('The template cannot be deleted');      }  }   Then I tried this and had the same problem:  function DeleteTab1() {    var spreadsheet = SpreadsheetApp.getActive();     var sheet = spreadsheet.getActiveSheet();     var sheetname = sheet.getName();     if(sheetname != "Template")  {      spreadsheet.deleteActiveSheet();    }    if(sheetname = "Template") {       SpreadsheetApp.getUi().alert('The template cannot be deleted');      }  }
80057
I'm writing a web page in ASP.NET. I have some JavaScript code, and I have a submit button with a click event.  Is it possible to call a method I created in ASP with JavaScript's click event?
26981
I searched all over this site and the web for a good and simple example of autocomplete using jQuery and ASP.NET. I wanted to expose the data used by autocomplete with a webservice (and will probably do that next). In the meantime, I got this working, but it seems a little hacky...  In my page I have a text box:  &lt;input id="txtSearch" type="text" /&gt;   I am using jQuery autocomplete, set up per their example:  &lt;link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" /&gt; &lt;script type="text/javascript" src="js/jquery.bgiframe.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.dimensions.pack.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.autocomplete.js"&gt;&lt;/script&gt;   Here is where it starts to get hacky... I call a page instead of a webservice:    &lt;script type="text/javascript"&gt;     $(document).ready(function(){         $("#txtSearch").autocomplete('autocompletetagdata.aspx');     });         &lt;/script&gt;   In the page I stripped out ALL of the html and just have this (otherwise, various HTML bits show up in the autocomplete dropdown):  &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocompletetagdata.aspx.cs" Inherits="autocompletetagdata" %&gt;   And in my autocompletetagdata.aspx, I am using SubSonic to query, format and return data from the database (one data item per line):  protected void Page_Load(object sender, EventArgs e) {     // Note the query strings passed by jquery autocomplete:     //QueryString: {q=a&amp;limit=150&amp;timestamp=1227198175320}      LookupTagCollection tags = Select.AllColumnsFrom&lt;LookupTag&gt;()         .Top(Request.QueryString["limit"])         .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")         .OrderAsc(LookupTag.Columns.TagDescription)         .ExecuteAsCollection&lt;LookupTagCollection&gt;();      StringBuilder sb = new StringBuilder();      foreach (LookupTag tag in tags)     {         sb.Append(tag.TagDescription).Append("\n");     }      Response.Write(sb.ToString()); }   If you don't do a LIKE query, then it returns everything that contains a match for the character(s) you type -- e.g., typing "a" will include "Ask" and "Answer" as well as "March" and "Mega." I just wanted it to do a starts with match.  Anyway, it works and it's pretty easy to set up, but is there a better way?