Question

我有一个类别选择然后将子类别加载到下拉列表中，当选择子类别时，它应该根据它们的选择通过jQuery加载不同的元素，

继承HTML

<li>
      <label for="cat">Choose The Category..</label>
      <select name="cat" class="required">
      <option type=""></option>
      <? 
      $conn = $db->query("SELECT * FROM categories WHERE parent_id = 0 ORDER BY name ASC");
        while($a = $db->fetch_array($conn)) {
            echo "<option value='{$a['category_id']}'>{$a['name']}</option>";
        }
        echo "</select>";
      ?>
      </select>
    </li>
    <li id="category">
    </li>

JS像这样工作

    $("select[name=cat]").change(function() {
    if($("select[name=cat] option:selected").val() != "") {
        $("#category").append(get_sub($("select[name=cat] option:selected").val()));
    }
});
$("select[name=category]").change(function() {
    if($("select[name=category] option:selected").val() != "") {
        $("#filters").append(get_filters($("select[name=category] option:selected").val()));
    }
});

第一个功能加载子类别就好了，第二个功能只有在我手动添加子类别时才有效，如果我通过JS加载，它们不起作用，通过firebug检查调用，只加载子类别发生了，有什么想法吗？

Answer 1

您需要使用live event handlers：

为现在和将来与当前选择器匹配的所有元素附加事件的处理程序。

实时事件侦听器附加在文档根目录上。当它们被触发时，jQuery将检查你传入的选择器以查看元素是否匹配。这允许您监听与和未来匹配的元素上的事件。

示例（未经测试）：

$("select[name=cat]").live('change', function() {
    if($("select[name=cat] option:selected").val() != "") {
        $("#category").append(get_sub($("select[name=cat] option:selected").val()));
    }
});
$("select[name=category]").live('change', function() {
    if($("select[name=category] option:selected").val() != "") {
        $("#filters").append(get_filters($("select[name=category] option:selected").val()));
    }
});

替换DOM元素时jQuery不起作用

1 个答案: