Using jQuery to create a tr with html content, including a button that holds the key to its own removal.      $(document).ready(function(){   $(".btn-add").click(function(){     $('#revenue').append("&lt;tr&gt;&lt;td&gt;&lt;div class='input' id='test'&gt;&lt;p&gt;[Item]&lt;/p&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div id='room1' class='revenue-input'&gt;&lt;input type='number' min='0' id='room1rev' size='1' placeholder='0'&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;button class='btn-del'&gt;-&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;");   }); });     Then when that button on the tr (generated by the .btn-add click)  is clicked it doesn't work. It fails to remove the tr with all the html inside it.       $(document).ready(function() {   $('.btn-del').click(function() {     $(this).closest('tr').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.
23400
How do I remove items from, or add items to, a select box? I'm running jQuery, should that make the task easier. Below is an example select box.  &lt;select name="selectBox" id="selectBox"&gt;     &lt;option value="option1"&gt;option1&lt;/option&gt;     &lt;option value="option2"&gt;option2&lt;/option&gt;     &lt;option value="option3"&gt;option3&lt;/option&gt;     &lt;option value="option4"&gt;option4&lt;/option&gt;     &lt;/select&gt;
100032
How exactly do you make an auto-refreshing div with JavaScript (specifically, jQuery)?  I know about the setTimeout method, but is it really a good practice ? Is there a better method?  function update() {     $.get("response.php", function(data) {         $("#some_div").html(data);     });     window.setTimeout("update();", 10000); }
74778
I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.  Any ideas how to work around this?  Here's the code:  $.get('/some_url',    { 'val1': id },    function (data) {     var row = $('#detailed_edit_row');     row.hide();     row.html(data);     row.slideDown(1000);   } );
80948
I have an HTML page with a typical structure:  &lt;html&gt;   &lt;head&gt;    &lt;script src="..." &gt;&lt;/script&gt;    &lt;style&gt;...&lt;/style&gt;   &lt;/head&gt;   &lt;body&gt;    content   &lt;/body&gt;   &lt;script&gt;     var success_callback = function(data) {       // REPLACE PAGE CONTENT &amp; STRUCTURE WITH "data"     }     ajax(url, params, success_callback);   &lt;/script&gt; &lt;/html&gt;   Do you think it is possible ?  I've already tried to give the html tag an id and doing $(id).replace(data); with no success.  Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).  EDIT : I forgot to say that scripts in the received content have to be executed, even external scripts included using &lt;script src="..."&gt;.
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.
80656
I want do something like this:  Button btn1 = new Button(); btn1.Click += new EventHandler(btn1_Click); Button btn2 = new Button(); // Take whatever event got assigned to btn1 and assign it to btn2. btn2.Click += btn1.Click; // The compiler says no...   Where btn1_Click is already defined in the class:  void btn1_Click(object sender, EventArgs e) {     // }   This won't compile, of course ("The event 'System.Windows.Forms.Control.Click' can only appear on the left hand side of += or -="). Is there a way to take the event handler from one control and assign it to another at runtime? If that's not possible, is duplicating the event handler and assigning it to another control at runtime doable?  A couple of points: I have googled the heck out of this one for awhile and found no way of doing it yet. Most of the attempted approaches involve reflection, so if you read my question and think the answer is incredibly obvious, please try to compile the code in Visual Studio first. Or if the answer really is incredibly obvious, please feel free to slap me with it. Thanks, I'm really looking forward to seeing if this is possible.  I know I could just do this:  btn2.Click += new EventHandler(btn1_Click);   That's not what I'm looking for here.  This is also not what I'm looking for:  EventHandler handy = new EventHandler(btn1_Click); Button btn1 = new Button(); btn1.Click += handy; Button btn2 = new Button(); btn2.Click += handy;
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?
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?
104396
So, I've been struggling with this for a while, trying to figure out how to get it to work. Here is what I originally did:  &lt;button class="btn btn-primary {!v.isLink1 ? 'active' : ''}"&gt;   And so on. Here's the documentation on it.   However, when you actually try to save this in the developer console, you get the error:  Field Integrity Exception: Failed to save undefined: Cannot mix expression and literal string in attribute value, try rewriting like {!'foo' + v.bar}: Source   I finally figured out that you have to put all of the classes inside of the expression, like so:  &lt;button class="{!v.isLink1 ? 'btn btn-primary active' : 'btn btn-primary'}"&gt;   This doesn't seem very intuitive. It's also not documented anywhere I could find. Could someone explain to me why it is this way and if it will ever change?   (and hopefully this question saves someone some headaches in the future)
21121
Is it possible to nest html forms like this  &lt;form name="mainForm"&gt;   &lt;form name="subForm"&gt;   &lt;/form&gt; &lt;/form&gt;   so that both forms work? My friend is having problems with this, a part of the subForm works, while another part of it does not.
38897
I'm trying to hide a div dynamically. This works for me. But when I try to do a nested div. It suddenly doesnt work anymore. Am I missing something?  Component(Working)  &lt;ui:button label="Toggle" press="{!c.toggle}"/&gt; &lt;div aura:id="text"&gt;Now you see me&lt;/div&gt;   Component(Not Working)  &lt;ui:button label="Toggle" press="{!c.toggle}"/&gt; &lt;div&gt;     &lt;div aura:id="text"&gt;Now you see me&lt;/div&gt; &lt;/div&gt;   Controller  toggle : function(component, event, helper) {         var toggleText = component.find("text");         $A.util.toggleClass(toggleText, "toggle");     },   Style  .THIS.toggle {     display: none; }
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.
92658
I'm using Jquery's toggle event to do some stuff when a user clicks a checkbox, like this:  $('input#myId').toggle( function(){ //do stuff   }, function(){ //do other stuff     } );   The problem is that the checkbox isn't being ticked when I click on the checkbox. (All the stuff I've put into the toggle event is working properly.)  I've tried the following:  $('input#myId').attr('checked', 'checked');   and  $(this).attr('checked', 'checked');   and even simply  return true;   But nothing is working. Can anyone tell me where I'm going wrong?  Edit - thanks to all who replied. Dreas' answer very nearly worked for me, except for the part that checked the attribute. This works perfectly (although it's a bit hacky)  $('input#myInput').change(function () {     if(!$(this).hasClass("checked"))     {         //do stuff if the checkbox isn't checked         $(this).addClass("checked");         return;     }      //do stuff if the checkbox isn't checked     $(this).removeClass('checked'); });   Thanks again to all who replied.
58463
Does anyone know of an easy way to escape HTML from strings in ?  I need to be able to pass an arbitrary string and have it properly escaped for display in an HTML page (preventing JavaScript/HTML injection attacks).  I'm sure it's possible to extend jQuery to do this, but I don't know enough about the framework at the moment to accomplish this.
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?
25094
I have HTML code like this :  &lt;div&gt;        &lt;a&gt;Link A1&lt;/a&gt;        &lt;a&gt;Link A2&lt;/a&gt;        &lt;a&gt;Link A3&lt;/a&gt; &lt;/div&gt;  &lt;div&gt;        &lt;a&gt;Link B1&lt;/a&gt;        &lt;a&gt;Link B2&lt;/a&gt;        &lt;a&gt;Link B3&lt;/a&gt; &lt;/div&gt;   When user clicks a link from above HTML, I want to get the jQuery object of the corresponding &lt;a&gt; element, and then manipulate its sibling. I can't think of any way other than creating an ID for each &lt;a&gt; element, and passing that ID to an onclick event handler. I really don't want to use IDs.   Any suggestions?