Databases
StackOverflow2013
Postsdbo
POjQuery change and click event timing
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery change and click event timing
    primarykey
    data
    text
    <p>I seem to have a timing problem with my jQuery change and click events. In my site I have it with an Ajax post instead of an alert, but it's easier to reproduce it using the alert. I have a simple HTML page using jQuery Version 1.7.1.</p> <p>The scenario is editing the textbox and then directly clicking the button. The change event is always fired but if it contains a alert the click event is never called. If I cheat and put a timeout around the alert (you might have to play around a bit with the values there) the click event is called normally.</p> <p>/<strong>** EDIT **</strong>/ If you set a breakpoint somewhere in the change event and wait for a few seconds the click event will aslo fail to fire.</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function () { $("input[type=text]").change(function () { //alert('changed'); $("#text").text('changed'); setTimeout(function () { $("#text").text('changed timeout'); alert('changed'); }, 100); }); $("input[type=submit]").click(function () { alert('clicked'); $("#text").text('clicked'); }); }); &lt;/script&gt; &lt;div id="main"&gt; &lt;div class="container"&gt; &lt;input type="text" /&gt; &lt;input type="submit" value="click me" /&gt; &lt;div id="text" &gt;bla&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>My Ajax call that has the save behavoir is the following:</p> <pre><code>$.ajax({ type: 'POST', url: postUrl, data: form.serialize(), beforeSend: function () { // display overlay for work in progress }, success: function (result) { updateTableSuccess(); }, complete: function () { // hide overlay for work in progress }, error: function (jqXHR) { if (jqXHR.responseText.length &gt; 0) { showErrorMessage(jqXHR.responseText); } } }); </code></pre> <p>The overlay is simply appending 2 divs to the body Tag.</p> <p>/<strong>** Edit **</strong>/ It seems that the overlay is the real problem and causes the same behavoir as the alert and stops the click event from being fired.</p> <pre><code>showWorkInProgress = function (message, elementId) { if ($("#overlay").length == 0) { $("&lt;div id='overlay' class='ui-widget-overlay'&gt;&lt;/div&gt;").appendTo("body"); } if ($("#workInProgress").length == 0) { $("&lt;div id='workInProgress'&gt;&lt;/div&gt;").appendTo("body"); } $("#workInProgress").html(message); if (elementId != null) { $("#workInProgress").center(elementId); } else { $("#workInProgress").center(); } $("#overlay").show(); $("#workInProgress").show(); }; </code></pre> <p>Can anyone explain why jQuery behaves like this and how I could do this nicer without the setTimeout hack?</p> <p>Thanks for any help =)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNischo
    1. USNischo
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhat exactly does the alert have to do with this? Alerts don't change the way code executes, it just blocks the browser until you click "OK". When the input loses focus, the change event happens, resulting in the alert box which blocks the browser, which prevents the submit button from being interacted with (i'm guessing). Do your debugging with console.log() or maybe even better, step through it line by line with a debugger.
      singulars
      1. POjQuery change and click event timing
      1. USKevin B
    2. COIf I debug and set a breakpoint on the $("#text").text('changed'); and wait a few seconds the click event also doesn't get fired. I'll edit the post for that..
      singulars
      1. POjQuery change and click event timing
      1. USNischo
    3. COYour code works just fine. http://jsfiddle.net/w9Thc/5/ Stop getting stuck in the alert. Get to the real problem.
      singulars
      1. POjQuery change and click event timing
      1. USKevin B
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload