Каскадные блоки выбора с помощью jQuery

я хочу каскадировать с помощью полей выбора html и сообщений jQuery ajax. когда я выбираю параметр, он отправляет собственное значение в другой файл и получает значения json. да, я делаю это с постом ajax. но в функции обратного вызова я добавлю еще одно поле выбора, чтобы установить все данные jSON. и это я делаю правильно. но когда я выбираю параметр из добавленного поля выбора, событие jQuery «change» не обрабатывает это новое поле выбора и в конечном итоге не работает с другими функциями.

Мои коды jQuery следующие:

$(document).ready(function(){

    $("#kategoriler select").on('change',function(e){

        var catID = $(this).val();

        if($(this).next().is("select")){
            $(this).nextAll("select").remove();
        }

        console.log($(this));
        $.ajax({
            async: false,
            type: "POST",
            url: "ajax_cate_add",
            data: "catID=" + catID,

            success: function(data){

                if(data.length > 0){

                    var $parent = $("#kategoriler select:last").after("<select></select>").next();

                    for(var i = 0; i < data.length; i++){
                        $parent.append("<option value=" + data[i].id + ">" + data[i].tr_adi + "</option>");
                    }
                }
            }
        });
    });
});

Стартовые HTML-коды следующие:

<div id="kategoriler">
    <select>
        <option value="8">Rezervasyon</option>
        <option value="7">E-Concierge</option>
        <option value="6">Özel F?rsatlar</option>
        <option value="5">Safira SPA &amp; Sa?l?k</option>
        <option value="4">Toplant? &amp; Davetler</option>
        <option value="3">Yeme &amp; ?çme</option>
        <option value="2">Odalar &amp; Süitler</option>
        <option value="1">Genel Bak??</option>
    </select>
</div>

но в консоли, когда я набираю следующий код, он работает:

 $("select").change(function(){
      alert(2);
 });

в корневом поле выбора выберите параметр, и после того, как приведенный выше код я наберу в консоли и выберите параметр в новом поле выбора, эти коды действительно работали и отображали предупреждающее сообщение.


jquery cascadingdropdown
person Mesuti    schedule 16.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во время вашей привязки, т.е. когда вы создаете обработчик изменений, элемент (элемент select) не существует в DOM (поскольку он создается динамически). Таким образом, он не связывает обработчики change, поскольку нет элемента для привязки. Таким образом, одним из простых решений было бы использование делегирования. Теперь красота использования делегирования заключается в том, что независимо от того, когда элемент создан, обработчик назначается элементу. Это должно помочь вам.

$(document).on('change','select', function(){
    alert('test');
});

PS: Вы должны попробовать использовать делегирование всякий раз, когда вам нужно создать элемент на ходу (динамически).

person user1    schedule 16.07.2013
comment
спасибо за этот ответ. я исследую bind-live-delegate в jQuery и изучаю новую тему :) - person Mesuti; 17.07.2013
comment
Если это помогло вам, вам следует подумать о том, чтобы нажать кнопку с галочкой и отметить ее как ответ. :) - person user1; 17.07.2013
comment
это не решило мою проблему, но навело на мысль. Я решаю эту проблему с помощью функции делегата. - person Mesuti; 18.07.2013