Looking to add some functionality when users double click on a div to pop up a box. I already have the pop-up functionality which works with inline onClick(). But I would like to change this to double click.   I have tried the following which will work if invoked after an element is added.   $(".dz-preview").dblclick(function() {     console.log("inside dbl");     renameFile(this); });   But I cant seem to figure out how to get it to work on dynamically generated elemenets.
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.
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.
90856
Ok, I'm doing a bunch of RIA/AJAX stuff and need to create a "pretty", custom confirm box which is a DIV (not the built-in javascript confirm). I'm having trouble determining how to accomplish a pause in execution to give the user a chance to accept or decline the condition before either resuming or halting execution. (depending upon their answer)   So here's the general flow of logic I'm dealing with:   User selects an item from dropdown and clicks button. In client-side javascript eventhandler for button, I need to check a (this is the key) SERIES of conditions for the item they chose in dropdown.  These conditions could possibly result in not showing any confirmation at all or possibly only some of the conditions may evaluate to true which means I'll need to ask the user to accept or decline the condition before proceeding. Only one confirmation should be show at a time.   To demonstrate the logic:  function buttonEventHandler() {  if (condition1) {   if(!showConfirmForCondition1) // want execution to pause while waiting for user response.      return; // discontinue execution }  if (condition2) {   if (!showConfirmForCondition2) // want execution to pause while waiting for user response.       return; // discontinue execution }  if (condition3) {   if (!showConfirmForCondition3) // want execution to pause while waiting for user response.       return; // discontinue execution }  ...   }    If anybody has dealt with this challenge before and found a solution, help would be greatly appreciated. As a note, I'm also using the MS Ajax and jQuery libraries although I haven't found any functionality that may already be included in those for this problem.
76419
I'm using jQuery to hide and show elements when a radio button group is altered/clicked. It works fine in browsers like Firefox, but in IE 6 and 7, the action only occurs when the user then clicks somewhere else on the page.  To elaborate, when you load the page, everything looks fine. In Firefox, if you click a radio button, one table row is hidden and the other one is shown immediately. However, in IE 6 and 7, you click the radio button and nothing will happen until you click somewhere on the page. Only then does IE redraw the page, hiding and showing the relevant elements.  Here's the jQuery I'm using:  $(document).ready(function () {   $(".hiddenOnLoad").hide();    $("#viewByOrg").change(function () {     $(".visibleOnLoad").show();     $(".hiddenOnLoad").hide();   });    $("#viewByProduct").change(function () {     $(".visibleOnLoad").hide();     $(".hiddenOnLoad").show();   }); });   Here's the part of the XHTML that it affects. The whole page validates as XHTML 1.0 Strict.  &lt;tr&gt;   &lt;td&gt;View by:&lt;/td&gt;   &lt;td&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByOrg" value="organisation"       checked="checked" /&gt;Organisation&lt;/p&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByProduct" value="product" /&gt;Product&lt;/p&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="visibleOnLoad"&gt;   &lt;td&gt;Organisation:&lt;/td&gt;   &lt;td&gt;     &lt;select name="organisation" id="organisation" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="hiddenOnLoad"&gt;   &lt;td&gt;Product:&lt;/td&gt;   &lt;td&gt;     &lt;select name="product" id="product" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt;   If anyone has any ideas why this is happening and how to fix it, they would be very much appreciated!
121420
I have put together the following mootools script   window.addEvent('domready', function() {     var shouts = "timed.php";     var log = $('log_res');     function updateData (url,target)     {         new Ajax(url,{         method: 'get',          update: $(target),          onComplete: function() {         log.removeClass('ajax-loading');}  }).request();         log.empty().addClass('ajax-loading');     }      var update = function(){ updateData ( shouts, 'log_res' ); };     update();           // call it immediately     update.periodical(10000);   // and then periodically   });   heres the html  &lt;div id="AJAX"&gt;     &lt;h3&gt;Ajax Response&lt;/h3&gt;     &lt;div id="log_res"&gt;exercise&lt;/div&gt; &lt;/div&gt;   its using moo 1.1.  The above works fine, the page loads then the ajax request kicks in div id log_res has a class of ajax-loading whilst its updating, and when its finished the text exercise in the div is replaced with whatever the ajax has returned (yippee). But I want to put some custom HTML into the div WHILST the page is loading, because the ajax-loading class is not enough to contain the information, i also want to put a spinny flasher into the div whilst the ajax request is retrieving the information. Hope that makes sense!
89118
In my plugin, I would like to add two buttons to Media Manager (to the left of "Insert Into Post" in "media-toolbar-primary" section), and connect a jQuery action to it.   First one - The "Select All" button shoud allow to select all availabe images (only images), depending on option value selected (eg. All Media Items, Uploaded to This post etc). So if "All Media Items" is selected - all images available will be selected, if "Uploaded to This post" is selected - only images attached to current post will be selected. Second one - "Custom Insert Into Post" - will get images data for all selected images (full size image source, alt text, size etc that are available) and while allowing to wrap them in aditional html code - return code to tinymce editor.   Returned code for second button could look this way:  &lt;ul&gt;   &lt;li&gt;&lt;img src="full/path/to/001.jpg" alt="alt text 1" /&gt;&lt;/li&gt;   &lt;li&gt;&lt;img src="full/path/to/002.jpg" alt="alt text 2" /&gt;&lt;/li&gt;   &lt;li&gt;&lt;img src="full/path/to/003.jpg" alt="alt text 3" /&gt;&lt;/li&gt;   &lt;li&gt;&lt;img src="full/path/to/004.jpg" alt="alt text 4" /&gt;&lt;/li&gt;   &lt;li&gt;&lt;img src="full/path/to/005.jpg" alt="alt text 5" /&gt;&lt;/li&gt; &lt;/ul&gt;   As far as I understand, the only way is to use override appropriate Backbone view, but beside that, thats all I know for now.  Thanks for help.
24017
While reuploading a bunch of  to imgur, I noticed something funny: sometimes, after uploading an image from the web, I would no longer be able to paste anything into the edit box.  A bit more investigation revealed that the following steps are needed to reproduce this bug:   In the SE post editor, click the button to upload an image. In the image upload dialog, click "You can also provide a link from the web." Make sure the URL input box has the focus, and then close the dialog by pressing Esc.  Alternatively, on Firefox, type or paste an image URL into the text box and submit the form by pressing Enter.  (This  does not seem to trigger the bug on Chrome; thanks, Chris Jester-Young.)  Either way, the bug will not be triggered if you close the dialog by clicking something outside the URL input box, like the submit button or the close button. Once back in the Markdown editor, try pasting something into the edit box.  Nothing will happen. Reopening and closing the image upload dialog will make paste work again.   Apparently, what happens is that the image upload dialog installs its own paste event handler onto the &lt;body&gt; element, in order to let you paste images into the dialog to upload them.  This handler should be removed when the dialog closes, but the steps above break this, leaving the handler in place.  Why?  Well, it turns out that the dialog itself removes the paste event handler when the URL entry box gains focus (so that you can paste an URL into it, of course), and adds it back when the box loses focus.  But if you submit the upload form while the URL entry box still has focus, then the blur event handler on the box runs only after the dialog has closed.  Thus, the sequence of events (no pun intended) runs like this:   Open upload dialog.  Paste event handler is added. URL entry box gets focus.  Paste event handler is removed. Close upload dialog by pressing Esc.  Paste event handler is (again, redundantly) removed. URL entry box loses focus as it disappears from the page.  Paste event handler is added back.  (Oops!)   How do we fix this?  Well, I see a bunch of ways:   Have the code that closes the popup remove the blur event handler from the URL input, so that it cannot run any more, before removing the popup from the DOM. Have the blur event handler itself check a flag to see if we've already closed the dialog, and if so, not add back the paste handler on &lt;body&gt;. Have the paste handler itself check if the upload dialog is present, and if not, do nothing and let the event propagate.   Any of these should work.  Heck, you could implement all of them, just to make sure. :)
72086
I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.  var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv;  var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t);   I would like to know if there is a better way to do this using jQuery. I've been experimenting with:  var odv = $.create("div"); $.append(odv); // And many more   But I'm not sure if this is any better.
67596
So when you use the comment shortcut C, you get the comment box appearing. However, you will get a weird black box.  Here's a picture of before:           And afterwards:           And after reloading, it disappears! This seems weird.  And after looking at the HTML, this seems to be the problem:  &lt;div data-questionid="260187" id="question" class="question keyboard-selected"&gt;   After removing the class attribute, the box goes away.
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?
83075
I want to be able to close an alert box automatically using Javascript after a certain amount of time or on a specific event (i.e. onkeypress).  From my research, it doesn't look like that's possible with the built-in alert() function.  Is there a way to override it and have control over the dialog box that it opens?  Also, I don't want an override that shows a hidden div as the alert.  I need an actual dialog box.
105818
Is it possible to add a new button to an existing panel or an existing node that runs a custom operator?  How can I do this?
21250
I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event?  Events are attached using:    Event.observe; DOM's addEventListener; As element attribute element.onclick.
69367
I want to execute custom jquery code which shows login dialog to user if he clicks a button and he is not logged in. How could I do that?
23360
I want to use jQuery inside a firefox extension, I imported the library in the xul file like this:  &lt;script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"&gt; &lt;/script&gt;   but the $() function is not recognized in the xul file neither do the jQuery().  I googled about the problem and found some solutions but no one did work with me:    I've also tried to pass the 'content.document' object(which refrences the 'document' object) as the context parameter to the jQuery function like this:  $('img',content.document);   but still not working, does any one came across this problem before?
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);
91273
My users would like to be able to hit Ctrl+S to save a form.  Is there a good cross-browser way of capturing the Ctrl+S key combination and submit my form?  App is built on Drupal, so jQuery is available.