Как я могу получить события изменения jQuery из динамических элементов формы в PHP? - PullRequest
Новая
       24

Как я могу получить события изменения jQuery из динамических элементов формы в PHP?

2 голосов
/ 20 июня 2009

Чтобы выбрать категории, я хочу использовать выпадающие списки. Каждый список содержит один уровень категорий. Так что это: верхний уровень, sub, subub, subsubsub и т. Д. Каждый уровень динамически извлекается через мой скрипт getcat.php, который показывает <select> объект.

Поиск пока работает со следующим кодом. Однако, поскольку это форма, я хочу получить последнее выбранное значение, чтобы иметь идентификатор категории. Это не работает для меня. Я попытался $("select:last option:selected"), но это не работает с недавно вставленными элементами.

После выбора категории должно появиться поле ввода, в котором пользователь может создать свою собственную подкатегорию (внутри выбранной категории). Это также не работает с новыми элементами.

Теперь я попытался поиграть с .live, но это не поддерживает события изменений. Ребята, есть ли у вас какие-либо советы по его улучшению?

В настоящее время у меня есть следующий код: 

$("select").bind("change", function(){
    $(this).nextAll().remove();
    var value = $(this).val();
    $("#currentcat").val(value);
    if($("select:last option:selected").hasClass('makenew')) {
        $("#newcat").show();
    }
    else if($("select:last option:selected").hasClass('disabled')) { }
    else {
    $.get("getcat.php", { c: value },
        function(data){
            $("#getcats").append(data);
        });
    $("#newcat").hide();
    }    
});

Однако, как видите, это не красота.

Ответы [ 2 ]

2 голосов
/ 20 июня 2009

Вы повторно привязываете событие onchange к новому полю выбора?

1 голос
/ 20 июня 2009

Если вы хотите, чтобы новые <option> s были связаны с DOM и работали в разных браузерах, я бы предложил добавить их к вашему выбору, используя document.createElement и document.createTextNode, например: 

var opt = document.createElement('option');
opt.value = "someValue";
opt.appendChild(document.createTextNode("someText"));
$('#currentcat').append(opt);

Таким образом, вместо использования $ .get вам, вероятно, следует использовать $. GetJSON , чтобы получить объект JSON, содержащий значения и текстовые атрибуты опций, которые вы добавляете в свой выбор. Объект JSON, полученный с сервера, должен выглядеть следующим образом: 

                { "options" : [   
                                    { "text" : "Fishing",  // First element
                                      "value"  : "5" },
                                    
                                    { "text" : "Skiing",  // Second Element
                                      "value"  : "70" }
                               ]
                }

Итерация по объекту будет выглядеть примерно так: 

$.getJSON("getcat.php", { c: value }, function(json) {
    var $select = $('<select></select>).attr('id','currentcat').attr('name','currentcat').hide(); 
    $.each(json.options, function(i, item) {
        var opt = document.createElement('option');
        opt.value = item.value;
        opt.appendChild(document.createTextNode(item.text));
        $('#currentcat').append(opt);        
    });
    $("#newcat").hide();
    $('#someDiv').append($select).show();
});

Выше не проверено, и отражает мое понимание вашего вопроса. Надеюсь, это поможет.

...