Question

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,

Heres the 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 works like this

    $("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 function loads up sub categories just fine, second function only works if I add the sub categories by hand, If I load up via JS, they don’t work, checked via firebug for the calls, only load up of sub categories happens, any ideas?

Answer 1

You need to use live event handlers:

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

Live event listeners are attached on the document root. When they are fired, jQuery will check the selector you passed in to see if the element matches. This allows you to listen for events on elements that match that selector now and the future.

Example (untested):

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