如何从 PHP 中的动态表单元素中检索 jQuery 更改事件？

Question

为了选择类别，我想使用下拉列表。每个列表包含一个级别的类别。所以它是：顶级、子、子子、子子子等。每个级别都是通过我的脚本getcat.php 动态检索的，它显示了一个<select> 对象。

目前的检索使用以下代码。但是，由于它是一个表单，我想获取最后一个选择的值，这样我就可以获得类别 ID。这对我不起作用。我试过$("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();
    }    
});

然而，正如你所见，它不是美女。

Answer 1

如果您希望新的 <option>s 绑定到 DOM 并在不同的浏览器中工作，我建议您使用 document.createElement 和 document.createTextNode 将它们附加到您的选择中，如下所示：

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

因此，您应该使用 $.getJSON 来获取 JSON 对象，而不是使用 $.get，该对象包含您将附加到选择的选项的值和文本属性。从服务器检索到的 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();
}); 

以上内容未经测试，反映了我对您问题的理解。希望对您有所帮助。

Answer 2

您是否将 onchange 事件重新绑定到新的选择框？