Databases
StackOverflow2013
Postsdbo
POJquery - .on not firing?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery - .on not firing?
    text
    copied!<h2>SOLVED!</h2> <p>My mistake was missing the jQuery operator function:</p> <pre><code> &lt;script&gt; $(function() { // &lt;-- THIS LINE $('body').on('change', '#billing_country', function() { console.log($('#billing_country').val()); $.post("/store/ajax_get_zones", { country_id: $('#billing_country').val() }, function(e) { if (e) $("#billing_state").html(e); }) }); }); &lt;/script&gt; </code></pre> <p>Thanks for the second pair of eyes guys. (Thanks @Adil for the extremely quick response)</p> <hr> <h2>Orrignal Question:</h2> <p>I have the following very simple code running on my site that just broke for no apparent reason. I sware I've done this 100 times and for some reason it's not working now? </p> <p><a href="http://jsfiddle.net/Wallter/S6DDq/" rel="nofollow">jsFiddle</a></p> <p>It works without the containing <code>(function() { ... }</code> am I doing it wrong?</p> <h2>HTML</h2> <pre><code>&lt;div class="validate_the_fields_below" id="new_billing_address" style=""&gt; &lt;table class="form-table"&gt; &lt;tbody&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="first_name"&gt;First Name*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="text" name="billing_first_name" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="last_name"&gt;Last Name*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="text" name="billing_last_name" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="phone"&gt;Phone*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="tel" name="billing_phone" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="email"&gt;Email*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="email" name="billing_email" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="address1"&gt;Address 1*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="text" name="billing_address1" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="address2"&gt;Address 2&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input class="ignore required" type="text" name="" value=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="city"&gt;City*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="text" name="billing_city" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="country"&gt;Country*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt; &lt;select name="billing_country" id="billing_country" class="required"&gt; ... &lt;option value="219"&gt;Uganda&lt;/option&gt; &lt;option value="220"&gt;Ukraine&lt;/option&gt; &lt;option value="221"&gt;United Arab Emirates&lt;/option&gt; &lt;option value="222"&gt;United Kingdom&lt;/option&gt; &lt;option selected="selected" value="223"&gt;United States&lt;/option&gt; ... &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="state"&gt;State*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt; &lt;select name="billing_state" id="billing_state" class="required"&gt; ... &lt;option value="3666"&gt;South Carolina&lt;/option&gt; &lt;option value="3667"&gt;South Dakota&lt;/option&gt; &lt;option value="3668"&gt;Tennessee&lt;/option&gt; &lt;option value="3669"&gt;Texas&lt;/option&gt; &lt;option selected="selected" value="3670"&gt;Utah&lt;/option&gt; ... &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="field"&gt; &lt;td class="form-label"&gt;&lt;label for="zip"&gt;Zip*&lt;/label&gt; &lt;/td&gt;&lt;td class="form-input"&gt;&lt;input type="text" name="billing_zip" value="" class="required"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;input type="hidden" name="id" value="1" class="required"&gt; &lt;/div&gt; </code></pre> <h2>JavaScript</h2> <pre><code> &lt;script&gt; (function() { $('body').on('change', '#billing_country', function() { console.log($('#billing_country').val()); $.post("/store/ajax_get_zones", { country_id: $('#billing_country').val() }, function(e) { if (e) $("#billing_state").html(e); }) }); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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