I made this example code:   The question is about this click event:  var wrapper = $(".select-editable"); // Fields wrapper  $(wrapper).on('keypress', '#input1', function () {   var cs = $(this).val().length+1;   console.log( "total caracters:" + cs);   $('#mytext1').html('&lt;option value="dummy01"&gt;dummy01&lt;/option&gt;&lt;option value="dummy02"&gt;dummy02&lt;/option&gt;&lt;option value="dummy03"&gt;dummy03&lt;/option&gt;') });   I use #input1, #mytext1, and I want the click to be dynamic.  For example: if I create four selects in the table, the fourth select should have the click event like the first select (#input4 and #mytext4).  Is it possible?
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.
9012
I'd like to make a click event fire on an &lt;input type="file"&gt; tag programmatically.  Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.  I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.
23225
I am attempting to set a value in a textarea field using jquery with the following code:  $("textarea#ExampleMessage").attr("value", result.exampleMessage);   The issue is, once this code executes, it is not altering the text in the textarea?  However when performing an alert($("textarea#ExampleMessage").attr("value")) the newly set value is returned?
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);
87913
I want to make a drop down box that shows 2 or 3 options and let the user choose 1 from them?  I would like to let the user to choose from "millimeter", "centimeter" and "meter". These Options are not from the field of input.  It seems like none of them here is valid:
7040
I have a select control, and in a javascript variable I have a text string.  Using jQuery I want to set the selected element of the select control to be the item with the text description I have (as opposed to the value, which I don't have).  I know setting it by value is pretty trivial. e.g.  $("#my-select").val(myVal);   But I'm a bit stumped on doing it via the text description. I guess there must be a way of getting the value out from the text description, but my brain is too Friday afternoon-ed to be able to work it out.
101661
Just read a couple MSO posts about editing guidelines, after seeing  getting rejected.  I had stumbled upon an old question that somehow made it onto the front page, and saw a great answer there. The question was about "understanding events and event handlers in C#", and the answer was great but there was further information in the comments.  So I started editing the post; I found that "if we create a delegate void MyDelegate(object sender, EventArgs e)" was clearer if the backtick encompassed the delegate word, so I moved it.  A commenter was asking "How is the event fired?", and the answerer replied with a comment instead of editing his answer, so I added a code snippet to give an example of how the event would be fired.  Then I noticed the code block actually included two parts that really belonged in two separate classes (the one where the event is created, and the one where the event is registered/handled), so I split the definition and the consumption of the event into two code blocks. That made it much clearer what belonged where, even though there weren't any classes involved (didn't add any).  And then I added the part why I actually wanted to edit the post in the first place: I added the shorthand notation for registering events: myObj.SomethingHappened += HandleSomethingHappened;. I left the full notation in place.  And lastly I added a line of code to show how a handler could be unregistered with -=.  As the first reviewer approved the edit, I thought to myself "hmm this last paragraph I added to introduce the -= really just restates the previous one from the original author" - shortly after that, my edit was rejected by 3 reviewers in a row.  The reason was "This edit is incorrect or an attempt to reply to or comment on the existing post." -- really? Is this how constructive edits are being welcomed? Have I introduced bad code that's just plain wrong? I mean, I use the shorthand notation all the time, I know it's correct. The -= part was just added for the sake of completeness, and the backtick would have been too minor of an edit. Reordering the code snippets and splitting them in two distinct blocks really improves the post I find, but someone who just glanced at the diff could think I removed the event handler snippet, when I merely cut it &amp; pasted it below the event registration code.  So I'm guessing the redundant paragraph killed it? Should I submit another edit, minus that paragraph? Actually I don't even care, it's a question from 2009 with almost 60K views and the answer is great enough as it is to have received 155 upvotes (plus mine), and if people don't know they don't need to new up the delegate to register the event then they can just buy ReSharper and have the tool teach them it's redundant. And if they want to unregister a handler then they can certainly find how to do that somewhere else. And maybe I should be doing something else to kill my spare time than browsing SO and upvoting good questions and answers, downvoting and flagging bad ones, and improve the few posts I can contribute to with the few things I do know. I mean, I intended to genuinely improve an excellent post, it's a bit (quite) irritating to read it's an "incorrect" edit.  I take the [Reject] edits that change an answer's explanation or code, with a supposedly "better" alternative. Even if the proposed solution is better, it should be added as a comment, or a separate answer. guideline as what caused my edit to be rejected. Point is, I was adding information to the answer, not changing or replacing anything.  So, was this edit legit? If I understand  correctly, my edit should have been rejected for changing too much of the post, not for being incorrect or an attempt to comment on the answer. And if Servy's MSO answer is still right, it means I should have posted my content as a brand new answer... to a question that's like 4 years old? , but I find it would have been better to just edit the post, given that "Edits are expected to be substantial and to leave the post better than you found it."  Sorry for the long post.
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!
10911
With jQuery, how do I find out which key was pressed when I bind to the keypress event?  $('#searchbox input').bind('keypress', function(e) {});   I want to trigger a submit when ENTER is pressed.  [Update]  Even though I found the (or better: one) answer myself, there seems to be some room for variation ;)  Is there a difference between keyCode and which - especially if I'm just looking for ENTER, which will never be a unicode key?  Do some browsers provide one property and others provide the other one?
117147
myInput.value is one keystroke behind when I examine it in a keyPress event handler. So if the users types &quot;a&quot;, myInput.value gives me &quot;&quot;. Then when the user types &quot;b&quot;, myInput.value gives me &quot;a&quot;, and so on. The value doesn't seem to get updated with the character input by the keystroke that triggered the event. What am I doing wrong?
9968
I've been making a concerted effort to improve my javascript skills lately by reading as much javascript code as I can. In doing this I've sometimes seen the javascript: prefix appended to the front of event handler attributes in HTML element tags. What's the purpose of this prefix? Basically, is there any appreciable difference between:  onchange="javascript: myFunction(this)"   and  onchange="myFunction(this)"   ?
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?
88238
I have problem in some JavaScript that I am writing where the Switch statement does not seem to be working as expected.  switch (msg.ResultType) {   case 0:     $('#txtConsole').val("Some Val 0");     break;   case 1:     $('#txtConsole').val("Some Val 1");     break;   case 2:     $('#txtConsole').text("Some Val 2");     break; }   The ResultType is an integer value 0-2 and I can see that in FireBug.  In all cases, the switch transfers control to the final break statement which means all the logic is completely skipped.  What am I missing?
64820
If you know the Index, Value or Text. also if you don't have an ID for a direct reference.  ,  and  are all helpful answers.  Example markup  &lt;div class="selDiv"&gt;   &lt;select class="opts"&gt;     &lt;option selected value="DEFAULT"&gt;Default&lt;/option&gt;     &lt;option value="SEL1"&gt;Selection 1&lt;/option&gt;     &lt;option value="SEL2"&gt;Selection 2&lt;/option&gt;   &lt;/select&gt; &lt;/div&gt;
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).
92519
I have HTML like the following on my website:  &lt;div class="groups"&gt;   &lt;div class="group"&gt;     Group 1 priority:     &lt;select&gt;       &lt;option value="1.0"&gt;1&lt;/option&gt;       &lt;option value="2.0" selected="selected"&gt;2&lt;/option&gt;       &lt;option value="3.0"&gt;3&lt;/option&gt;     &lt;/select&gt;   &lt;/div&gt;   &lt;div class="group"&gt;     Group 2 priority:     &lt;select&gt;       &lt;option value="1.0"&gt;1&lt;/option&gt;       &lt;option value="2.0"&gt;2&lt;/option&gt;       &lt;option value="3.0" selected="selected"&gt;3&lt;/option&gt;     &lt;/select&gt;   &lt;/div&gt;   &lt;div class="group"&gt;     Group 3 priority:     &lt;select&gt;       &lt;option value="1.0" selected="selected"&gt;1&lt;/option&gt;       &lt;option value="2.0"&gt;2&lt;/option&gt;       &lt;option value="3.0"&gt;3&lt;/option&gt;     &lt;/select&gt;   &lt;/div&gt; &lt;/div&gt;   I am looking for a way to sort the order these groups appear in the browser using jQuery, based on the what is selected in the dropdown. It should resort when the user selects a new value in any of the dropdowns, or on page load.  What would be the easiest approach to this problem?  I have jQuery UI available, if the sortable thing can be used in any way. I couldn't not find a way to use that.  Update: There is other data in the &lt;div class="group"&gt; that should follow the dropdowns wherever they are moved. The number of groups varies from 0 to 20.
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?