替换DOM元素时jQuery不起作用答案

【问题标题】：jQuery doesn't work when DOM element is replaced替换DOM元素时jQuery不起作用
【发布时间】：2011-08-10 19:52:38
【问题描述】：

I have a category select that then loads up sub categories into a drop down, when sub category is selected, it should then load up different element via jQuery depending on their selection,

这是 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 检查调用，只加载子类别类别发生了，有什么想法吗？

【问题讨论】：

标签： php jquery dom

【解决方案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()));
    }
});

【讨论】：