$(document）.ready 和 $('#id'）.change 产生不同的结果

$(document).ready and $('#id').change produce different results

本文关键字：结果 change document #id ready      更新时间：2023-09-26

Site here.

为什么代码适用于$('#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>

请求已发出。通过检查Chrome开发人员工具中的"网络"选项卡，可以轻松验证这一点。它返回一个空数组，以便data = [] .因此，data[0].day抛出一个错误，并且该错误不会被捕获。

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

您希望$(this)在"ready"处理程序中引用什么？在"更改"处理程序中，它是"#club"元素。在"就绪"处理程序中，它可能是无用的。

而不是$(this).serialize()我认为您希望在"就绪"处理程序中$('#club').serialize()。

你的问题出在你的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请求应该可以正常工作。

相关文章：