php - 替换 DOM 元素时 jQuery 不起作用

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 :

Attach a handler to the event for all elements which match the current selector, now and in the future.

实时事件监听器附加在文档根目录上。当它们被触发时，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()));
    }
});