This is a java file which generates a div &amp; a text box dynamically.  js file  var count = 6; $(document).ready(function(){     $("#addmoreParam").click(function(){         $("#showParam tr:last").before("&lt;tr&gt;&lt;td&gt;&lt;div style=\"width:150px;background-color:#FFF; height:20px;\" contenteditable=\"true\" class=\"paramDiv\" id="+count+"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=text name=\"paramValue" + count +"\" class=paramValue /&gt;&lt;/td&gt;&lt;/tr&gt;");         count++;     }); });   Below is the code which produces alert when writing anything to div. I tried hard bu it is not giving alert box.  $(function(){     $(".paramDiv").on('keyup', '.paramDiv', function(){         alert('dd');     }); });   I am using jquery-1.9.1.js. Is on supported in this jquery version ?
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.
66558
I have seen the following methods of putting JavaScript code in an &lt;a&gt; tag:  function DoSomething() { ... return false; }    &lt;a href="javascript:;" onClick="return DoSomething();"&gt;link&lt;/a&gt; &lt;a href="javascript:DoSomething();"&gt;link&lt;/a&gt; &lt;a href="javascript:void(0);" onClick="return DoSomething();"&gt;link&lt;/a&gt; &lt;a href="#" onClick="return DoSomething();"&gt;link&lt;/a&gt;   I understand the idea of trying to put a valid URL instead of just JavaScript code, just in case the user doesn't have JavaScript enabled. But for the purpose of this discussion, I need to assume JavaScript is enabled (they can't login without it).  I personally like option 2 as it allows you to see what's going to be run&ndash;especially useful when debuging where there are parameters being passed to the function. I have used it quite a bit and haven't found browser issues.  I have read that people recommend 4, because it gives the user a real link to follow, but really, # isn't "real". It will go absolutely no where.  Is there one that isn't support or is really bad, when you know the user has JavaScript enabled?  Related question: .
8344
I'm working with a bit of html and Javascript code that I've taken over from someone else. The page reloads a table of data (via an asynchronous request) every ten seconds, and then re-builds the table using some DOM code. The code in question looks something like this:  var blah = xmlres.getElementsByTagName('blah'); for(var i = 0; i &lt; blah.length; i++) {     var td = document.createElement('td');     var select = document.createElement('select');     select.setAttribute("...", "...");     select.onchange = function() {         onStatusChanged(select, callid, anotherid);     };     td.appendChild(select); }   When the onchange event is fired for a &lt;select&gt; element however, it seems like the same values are being passed to the onStatusChanged() method for every &lt;select&gt; in the table (I've verified that in each iteration of the loop, callid and anotherid are being given new, distinct values).   I suspect this is occuring because of the nature of how I am setting the event handler, with the select.onchange = function() syntax. If I understand how this is working correctly, this syntax sets a closure for the onchange event to be a function which refers to these two references, which end up having a final value of whatever they are set to on the last iteration of the loop. When the event fires, the value referenced by callid and anotherid is the value set in the last iteration, not the value set at the individual iteration.  Is there a way that I can copy the value of the parameters I am passing to onStatusChanged()?  I've changed the title to better reflect the question and the accepted answer.
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);
40753
Recently I have started playing with jQuery, and have been following a couple of tutorials. Now I feel slightly competent with using it (it's pretty easy), and I thought it would be cool if I were able to make a 'console' on my webpage (as in, you press the ` key like you do in  games, etc.), and then have it Ajax itself back to the server in-order to do stuff.  I originally thought the best way would be to just get the text inside the textarea, and then split it, or should I use the keyup event, convert the keycode returned to an ASCII character, append the character to a string and send the string to the server (then empty the string).  I couldn't find any information on getting text from a textarea, all I got was keyup information. Also, how can I convert the keycode returned to an ASCII character?
20484
Recently I've been doing a lot of modal window pop-ups and what not, for which I used jQuery. The method that I used to create the new elements on the page has overwhelmingly been along the lines of:   $("&lt;div&gt;&lt;/div&gt;");   However, I'm getting the feeling that this isn't the best or the most efficient method of doing this. What is the best way to create elements in jQuery from a performance perspective?   has the benchmarks to the suggestions below.
82255
I'm making a page which has some interaction provided by javascript. Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. Obviously in this example, I need each link to store an extra bit of information: the id of the article. The way I've been handling it in case was to put that information in the href link this:  &lt;a class="article" href="#5"&gt;   I then use jQuery to find the a.article elements and attach the appropriate event handler. (don't get too hung up on the usability or semantics here, it's just an example)  Anyway, this method works, but it  a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)  The immediately obvious answer was to use attributes on the element. I mean, that's what they're for, right? (Kind of).  &lt;a articleid="5" href="link/for/non-js-users.html"&gt;   In  I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable. A common response was to put the data into the class attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. Yes it's technically valid, but it's not a great solution.  Another method I'd used in the past was to actually generate some JS and insert it into the page in a &lt;script&gt; tag, creating a struct which would associate with the object.  var myData = {     link0 : {         articleId : 5,         target : '#showMessage'         // etc...     },     link1 : {         articleId : 13     } };  &lt;a href="..." id="link0"&gt;   But this can be a real pain in butt to maintain and is generally just very messy.  So, to get to the question, how do you store arbitrary pieces of information for HTML tags?
112471
On my team, we usually do string concatentation like this:  var url = // some dynamically generated URL var sb = new StringBuffer(); sb.append("&lt;a href='").append(url).append("'&gt;click here&lt;/a&gt;");   Obviously the following is much more readable:  var url = // some dynamically generated URL var sb = "&lt;a href='" + url + "'&gt;click here&lt;/a&gt;";   But the JS experts claim that the + operator is less performant than StringBuffer.append(). Is this really true?
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);     });   }); });
104708
I'm working on a web page where I'm making an AJAX call that returns a chunk of HTML like:   &lt;div&gt;   &lt;!-- some html --&gt;   &lt;script type="text/javascript"&gt;     /** some javascript */   &lt;/script&gt; &lt;/div&gt;   I'm inserting the whole thing into the DOM, but the JavaScript isn't being run.  Is there a way to run it?    Some details: I can't control what's in the script block (so I can't change it to a function that could be called), I just need the whole block to be executed.  I can't call eval on the response because the JavaScript is within a larger block of HTML.  I could do some kind of regex to separate out the JavaScript and then call eval on it, but that's pretty yucky.  Anyone know a better way?
45178
I was looking for this a while back for JavaScript, but I was wondering a general purpose one exists for all, or most languages.  For example for LaTeX I would put the following in a text box  $f_i^k+10=x$   and it spits out the better formatted version  %%% %% Insert comment describing function here %%% $ f_{i}^{k} + 10 = x $   I can't be the only person on the planet that does not wish to go through a massive .tex file and fix these tedious problems.
32885
I have some html like this:  &lt;div id="1"&gt;     &lt;p&gt;         Volume = &lt;input type="text" /&gt;         &lt;button rel="3.93e-6" class="1" type="button"&gt;Check answer&lt;/button&gt;     &lt;/p&gt;     &lt;div&gt;&lt;/div&gt; &lt;/div&gt;   and some JS like this:  $("button").click(function () {     var buttonNo = $(this).attr('class');     var correct = Number($(this).attr('rel'));      validate (Number($("#"+buttonNo+" input").val()),correct);     $("#"+buttonNo+" div").html(feedback); });   What I'd really like is if I didn't have to have the class="1" on the button (I know numeric classes aren't valid, but this is a WIP!), so I could determine buttonNo based on the id of the parent div. In real life there are multiple sections looking like this.   How do I find the id of the div parenting the button. What would be a more semantic way to store the answer in the button code. I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things!
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!
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.
9792
Yesterday I had a two-hour technical phone interview (which I passed, woohoo!), but I completely muffed up the following question regarding dynamic binding in Java.  And it's doubly puzzling because I used to teach this concept to undergraduates when I was a TA a few years ago, so the prospect that I gave them misinformation is a little disturbing...  Here's the problem I was given:  /* What is the output of the following program? */  public class Test {    public boolean equals( Test other ) {     System.out.println( "Inside of Test.equals" );     return false;   }    public static void main( String [] args ) {     Object t1 = new Test();     Object t2 = new Test();     Test t3 = new Test();     Object o1 = new Object();      int count = 0;     System.out.println( count++ );// prints 0     t1.equals( t2 ) ;     System.out.println( count++ );// prints 1     t1.equals( t3 );     System.out.println( count++ );// prints 2     t3.equals( o1 );     System.out.println( count++ );// prints 3     t3.equals(t3);     System.out.println( count++ );// prints 4     t3.equals(t2);   } }   I asserted that the output should have been two separate print statements from within the overridden equals() method: at t1.equals(t3) and t3.equals(t3).  The latter case is obvious enough, and with the former case, even though t1 has a reference of type Object, it is instantiated as type Test, so dynamic binding should call the overridden form of the method.  Apparently not.  My interviewer encouraged me to run the program myself, and lo and behold, there was only a single output from the overridden method: at the line t3.equals(t3).  My question then is, why?  As I mentioned already, even though t1 is a reference of type Object (so static binding would invoke Object's equals() method), dynamic binding should take care of invoking the most specific version of the method based on the instantiated type of the reference.  What am I missing?
59773
I have a page message and I have a requirement that I want the text to be in red color.  I have written some javascript like this:  &lt;Script&gt;     window.onload=func1;     function func1()            {             document.getElementById('{!$Component.msg2}').style.color = "#ff0000";         alert('{!$Component.msg2}');     }   &lt;/Script&gt;   and the page message is like   &lt;apex:outputPanel id="errordisplayPanel" &gt;     &lt;apex:outputPanel Id="errorspanel"&gt;         &lt;input id="isDiscountCheckPrfmd" type="hidden" name="isDiscountCheckPrfmd" value="{!isDiscountCheckPrfmd}" /&gt;         &lt;c:Displayerror id="errordisplay" errorList="{!lstAllError}"  /&gt;                                  &lt;br/&gt;       &lt;/apex:outputPanel&gt;     &lt;div id="focusError"&gt;&lt;/div&gt;                         &lt;apex:pageMessages id="msg2" /&gt; &lt;/apex:outputPanel&gt;    I don't know why its not working. But when I use the static id that I pick up using inspect element it's working.  It was like:   document.getElementById("createSOheaderpage:newheaderform:newheaderpb:msg2:j_id63:j_id64:0:j_id65:j_id66:j_id68").style.color = "#ff0000";   Can someone please help me with this  Thanks in Advance
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.