jQuery .change only works for first instance

Question

I've got a series of conditional select elements that uses .load to insert dynamic content from an external file. The problem is it fires for the first element only and any subsequent instances result in no action.

I started off with this:

jQuery(document).ready(function($) {


$('#autocad-level-1').change(function() {

    var cat_id = $(this).val();
    console.log('Category Selected');
    $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

});

$('#autocad-level-2').change(function() {

    var p_id = $(this).val();
    console.log('Product Selected');
    $('#autocad-level-3-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-3.php?p_id='+p_id);

});

});

Research suggested I should use .on as the event handler, but I had no success with that either.

jQuery(document).ready(function($) {

$('#autocad-level-1').on("change", "select", function() {

    var cat_id = $(this).val();
    console.log('Category Selected');
    $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

});

$('#autocad-level-2').on("change", "select", function() {

    var p_id = $(this).val();
    console.log('Product Selected');
    $('#autocad-level-3-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-3.php?p_id='+p_id);

});

});

This is my HTML:

<div id="autocad-level-1-container">
    <select id="autocad-level-1" name="autocad-level-1">
      <option value="0">Select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      ...
    </select>
</div>
<div id="autocad-level-2-container"></div>
<div id="autocad-level-3-container"></div>

What am I doing wrong here? I'm out of ideas.

The second solution you tried should work... do you get any errors or console messages? — Adjit, Sep 20 '16 at 17:09

score 1 · Answer 1 · answered Sep 20 '16 at 17:04

Try to delegate the events, if your .load changes the html of the page and replaces the original selectboxes, then the events that are bound to them get unbound.

If you try to do something like:

$(document).on("change", "#autocad-level-2", function() { ....

and the same for all the change events that you are binding on selectboxes.

epascarello · Accepted Answer · 2016-09-20T17:15:18.420

1

You need to listen to the select from a parent element, not the select itself.

$('#autocad-level-2-container').on("change", "#autocad-level-2", function() { 
    /*** code here ***/
});

edited Sep 20 '16 at 17:15

answered Sep 20 '16 at 17:05

epascarello

204,599
20
195
236

They do... they just used the broader `"select"` instead of the `id` – Adjit Sep 20 '16 at 17:06
Thank you sir. Problem solved. – CChoma Sep 20 '16 at 17:10
1

So why does this work as opposed to using `'select'` as the selector? – Adjit Sep 20 '16 at 17:13

score 0 · Answer 3 · answered Sep 20 '16 at 17:04

use change like below.

 $('#autocad-level-1').on('change',function() {

        var cat_id = $(this).val();
        console.log('Category Selected');
        $('#autocad-level-2-container').load('http://website.dev/wp-content/themes/dmi/ajax/autocad-level-2.php?cat_id='+cat_id);

    });

score 0 · Answer 4 · answered Sep 20 '16 at 17:09

0

Change

$('#autocad-level-2').on("change", "select", function()

to

$('#autocad-level-2').delegate("change", "select", function()

ALSO

$('#autocad-level-1').on("change", "select", function()

Change to:

$('#autocad-level-1').delegate("change", "select", function() {

answered Sep 20 '16 at 17:09

geoff

1
6

2

Delegate has been deprecated as of `jQuery 3.0` http://api.jquery.com/delegate/ – Adjit Sep 20 '16 at 17:10
He had not speciied the jquery version he is using i he is using version 1.x it works – geoff Sep 20 '16 at 17:19

jQuery .change only works for first instance

4 Answers4