$ (document) .ready и $ ('# id'). Изменить произвести разные результаты

Question

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> 

Answer 1

запрос делается. это легко проверить, проверив вкладку Сеть в Chrome Инструменты разработчика. Она возвращает пустой массив, такой как data = []. Таким образом, data[0].day выдает ошибку и эта ошибка не является высота глаза наблюдателя

Разница между двумя блоками кода заключается в том, что содержится в переменной this. В первом случае это объект jQuery, содержащий ваш document. Во втором - объект jquery, содержащий элемент <select> с идентификатором club. Поскольку вы хотите сериализовать один и тот же элемент в своем $(document).ready, все, что вам нужно сделать, это изменить $(this) на $(#club).

Answer 2

Что это такое, что вы ожидаете $(this) обратиться в «готов» обработчик? В „изменить“ обработчика, это то, что „“ элемент. В „#club готов“ обработчика, это будет что-то вероятно, бесполезно.

Вместо $(this).serialize() Я думаю, что вы хотите в «готовом» обработчиком $('#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> 

Посмотрите на первую запись. Это не работает, потому что идентификатор не существует, и теги все испорчены. Убедитесь, что вы избегаете своих котировок, когда вы добавляете свои события в свой список. Когда вы это сделаете, ваш запрос jQuery $.ajax должен работать нормально.