Question

I have a select box. On change I have an alert which is triggered.

My page displays a grid of different products each one has the same select box. I use Ajax for pagination. When the user clicks to the next page or selects a different category Ajax loads the next lot of products.

However, when it loads the products the onchange event for the select boxes no longer works. It only works on the first page.

Any ideas?

Onchange event

$('.cardid').change(function() {
    alert('changed');
});

Select box

// Fill select box for Pictures with basket options
function picture_details($Products_SKU) {
    $selector=array("Framed ","Mounted ","Print ");
    $rtn = "";
    $DB = new mysql_db();
    $DB->sql_connect();
    // Select mounted and print products. Products SKU ends in either M or P
    $q = "SELECT Products_ID, Products_SKU, Products_Cost, Products_Size FROM products WHERE Products_SKU LIKE '".$Products_SKU."%' ORDER BY Products_ID ASC";
    $DB->query($q);
    if ($DB->get_num_rows()) {
        $results = $DB->fetch_all_rows(MYSQL_ASSOC, NULL);
        foreach ($results as $key => $row) { 
            $rtn .= "<tr><th style='width:100px;'>". $selector[$key]. ":</th><td style='width:300px;'> &pound;". $row['Products_Cost'] ." (". $row['Products_Size'] .")</td></tr>";     
        }
    }

    return $rtn;    
}

Answer 1

If you’re loading your products from an Ajax request, they’re being attached to the page AFTER the $(document).ready() action. When $(document).ready() is triggered, the products that are being retrieved from the Ajax request aren’t on the page.

Then, every time you call your “loadProducts” Ajax request, you’ll need to rebind the action to the new select element that is “comming” from the Ajax request.