JQuery не работает при замене элемента DOM

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()));
    }
});

Функция Firs прекрасно загружает подкатегории, вторая функция работает, только если я вручную добавляю подкатегории. Если я загружаюсь через JS, онине работает, проверено через firebug на звонки, происходит только загрузка подкатегорий, есть идеи?

Answer 1

Вам необходимо использовать обработчики живых событий :

Прикрепить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

Прослушиватели событий в реальном времени прикрепляются к корню документа. Когда они будут запущены, 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()));
    }
});