0

解决了！

我的错误是缺少 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 的快速回复）

原始问题：

我在我的网站上运行了以下非常简单的代码，但没有明显的原因就中断了。我发誓我已经这样做了 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>
4

3 回答 3

7

您错过$了 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 代码的最佳位置。参考

于 2013-04-16T18:07:24.170 回答
3

您没有执行 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 ()
于 2013-04-16T18:07:49.460 回答
1

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

你需要$像这样使用-

$(function() {
于 2013-04-16T18:08:31.543 回答