Question

为什么代码适用于$('#club').change(function(event)而不适用于$(document).ready(function()？ $.ajax函数是相同的，但前者什么都不做。

<script type="text/javascript">

    $(document).ready(function() {
        $.ajax({
            type: "post",
            url: "eventinfo.php",
            data:  $(this).serialize(),
            success: function(data) {
                $('#right_inside').html('<h2>' + $('#club').val() + '<span style="font-size: 14px"> (' + data[0].day + ')</h2><p>Entry: ' + data[0].entry + '</p><p>Queue jump: ' + data[0].queuejump + '</p><p>Guestlist closes at ' + data[0].closing + '</p>');
                },
            dataType: "json"
        });
    });

    $('#club').change(function(event) {
        $.ajax({
            type: "post",
            url: "eventinfo.php",
            data:  $(this).serialize(),
            success: function(data) {
                $('#right_inside').html('<h2>' + $('#club').val() + '<span style="font-size: 14px"> (' + data[0].day + ')</h2><p>Entry: ' + data[0].entry + '</p><p>Queue jump: ' + data[0].queuejump + '</p><p>Guestlist closes at ' + data[0].closing + '</p>');
                },
            dataType: "json"
        });

    });

</script>

Answer 1

提出请求。通过查看Chrome开发者工具中的“网络”标签，可以轻松验证这一点。它返回一个空数组data = []。因此data[0].day会抛出错误，并且不会捕获该错误。

两个代码块之间的区别在于变量this中包含的内容。在第一个中，它是一个包含document的jQuery对象。在第二个中，它是一个jquery对象，包含<select>元素，其标识为club。由于您要在$(document).ready中序列化相同的元素，您只需将$(this)更改为$(#club)。

Answer 2

您期望$(this)在＆＃34; ready＆＃39;中提及的是什么？处理程序？在＆＃34;改变＆＃34;处理程序，＃＆＃34; #club＆＃34;元件。在＆＃34; ready＆＃34;处理程序，它可能是无用的东西。

而不是$(this).serialize()我认为你想要{＆＃34;准备好＆＃34}中的$('#club').serialize()。处理程序。

Answer 3

您的问题出在您的HTML代码中。

<select id="club" class="dropdown" name="club">
    <option id="Let" lo'="" lola="" @="" disco="" kill="" s="">Let's Kill Disco @ Lola Lo</option>
    <option id="Fuzzy Logic @ The Place">Fuzzy Logic @ The Place</option>
    <option id="BOOM! @ The Place">BOOM! @ The Place</option>
    <option id="Fuzzy Logic @ Ballare">Fuzzy Logic @ Ballare</option>
    <option id="Jelly Baby @ Ballare">Jelly Baby @ Ballare</option>
    <option id="Fiesta @ Fez">Fiesta @ Fez</option>
</select>

看第一个条目。它不起作用，因为ID不存在，并且标签都搞砸了。将事件添加到列表中时，请确保撤消报价。当你这样做时，你的jQuery $.ajax请求应该可以正常工作。

$（document）.ready和$（'＃id'）。change产生不同的结果

3 个答案: