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代码。 Reference

Answer 2

您没有执行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 ()

Answer 3

您的代码有效 - http://jsfiddle.net/mohammadAdil/S6DDq/1/

你需要像这样使用$ -

$(function() {

Jquery - 。没有开火？

解决！

Orrignal问题：

HTML

的JavaScript

3 个答案: