Question

I am using CodeIgniter for my website. On one page I show different vehicles. The user can browse through all results with pagination.

I also have a few dropdown boxes which the user can use to further filter the results. One dropdown box contains the main category with brands (Mercedes, DAF, …)

The second dropdown box contains vehicle types. For this box I created a JQuery function which updates the contents of the box based on the brand selected in the first box. This does not work anymore when I click on a pagination link to go to the next page. I guess it has something to do with the fact that the function is created in the ready part. Can someone help, please?

JQuery code:

<script type="text/javascript">
function updateTypes(){
    $.ajax({
        type: "POST",
        data: "merk_id=" + $('#selection').val()  + "&voertuig=" + $('#voertuig').val(),
        url: "dropdown",
        success: function(msg){
            if (msg != ''){
                $("#selectionresult").html(msg).show();

            }
        }
    });
}


    $("#selection").change(updateTypes);


    // Update types when entering the second box with the mouse
    $("#selectionresult").mouseenter(updateTypes);

The first box has an id=selection and the second box has an id=selectionresult

Thanks in advance!

Answer 1

It sounds like the .html() call wipes out the previously-bound click event handler. Use .live() or .delegate() instead of .click(). Change

$("#selection").change(updateTypes);

to

$("#selection").live('change', updateTypes);
// or
$('some ancestor of #selection').delegate('#selection', 'change', updateTypes);

Doing this binds the event listener higher up the DOM tree, so the listener won’t get obliterated by the $("#selection").html() call.