Jquery - .没有开火？

Question

解决了!

我的错误是缺少jQuery运算符函数:

         <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> 

谢谢第二双眼睛的家伙.(感谢@Adil提供极快的响应)

---

Orrignal问题:

我在我的网站上运行了以下非常简单的代码,它没有明显的原因.我知道我已经完成了100次,由于某种原因它现在不能正常工作？

的jsfiddle

它的工作没有包含(function() { ... }我做错了吗？

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>   

Answer 1

你错过$了jQuery for document.ready处理程序,指定一个在DOM完全加载时执行的函数.

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

您还可以对document.ready使用更具描述性的内容.

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

传递给.ready()的处理程序保证在DOM准备好后执行,因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置.参考