CODEWITHSUNDEEP
javascriptjqueryhtml
Tyler Wall
Tyler Wall

Reputation: 3788

Jquery - .on not firing?

SOLVED!

My mistake was missing the jQuery operator function:

         <script>
            $(function() { // <-- 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);
                    })
                });
            });
        </script>

Thanks for the second pair of eyes guys. (Thanks @Adil for the extremely quick response)

Orrignal Question:

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?

jsFiddle

It works without the containing (function() { ... } am I doing it wrong?

HTML

<div class="validate_the_fields_below" id="new_billing_address" style="">
    <table class="form-table">
        <tbody>
            <tr class="field">
                <td class="form-label"><label for="first_name">First Name*</label>
                </td><td class="form-input"><input type="text" name="billing_first_name" value="" class="required"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="last_name">Last Name*</label>
                </td><td class="form-input"><input type="text" name="billing_last_name" value="" class="required"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="phone">Phone*</label>
                </td><td class="form-input"><input type="tel" name="billing_phone" value="" class="required"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="email">Email*</label>
                </td><td class="form-input"><input type="email" name="billing_email" value="" class="required"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="address1">Address 1*</label>
                </td><td class="form-input"><input type="text" name="billing_address1" value="" class="required"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="address2">Address 2</label>
                </td><td class="form-input"><input class="ignore required" type="text" name="" value=""></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="city">City*</label>
                </td><td class="form-input"><input type="text" name="billing_city" value="" class="required"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="country">Country*</label>
                </td><td class="form-input">
                    <select name="billing_country" id="billing_country" class="required">

                        ...

                        <option value="219">Uganda</option>
                        <option value="220">Ukraine</option>
                        <option value="221">United Arab Emirates</option>
                        <option value="222">United Kingdom</option>
                        <option selected="selected" value="223">United States</option>

                        ...

                    </select>
                </td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="state">State*</label>
                </td><td class="form-input">
                    <select name="billing_state" id="billing_state" class="required">

                        ...

                        <option value="3666">South Carolina</option>
                        <option value="3667">South Dakota</option>
                        <option value="3668">Tennessee</option>
                        <option value="3669">Texas</option>
                        <option selected="selected" value="3670">Utah</option>

                        ...

                    </select>
                </td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="zip">Zip*</label>
                </td><td class="form-input"><input type="text" name="billing_zip" value="" class="required"></td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" name="id" value="1" class="required">                   
</div>

JavaScript

        <script>
            (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);
                    })
                });
            });
        </script>

Upvotes: 0

Views: 79

Answers (3)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Your code works - http://jsfiddle.net/mohammadAdil/S6DDq/1/

You need to use $ like this-

$(function() {

Upvotes: 1

Adil
Adil

Reputation: 148110

You missed $ for the jQuery for document.ready handler, Specify a function to execute when the DOM is fully loaded.

$(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);
            })
        });
 });

You can also use more descriptive for of document.ready.

jQuery(document).ready(function({
     //Your code here.
});

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. Reference

Upvotes: 7

Kevin B
Kevin B

Reputation: 95028

You aren't executing the IIFE.

        (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);
                })
            });
        })(); // <--- note the ()

Upvotes: 3

Related Questions