jQuery select JavaScript generated elements

Question

I am using JavaScript to generate some HTML tables on the fly. After filling out this dynamic table, I employ jQuery to 'grab' some of the inputs and do some small calculations for form validation. However, my jQuery selector does not work with the dynamic HTML form. Can anyone give me some suggestions? Thanks!

Here is the code:

<script>
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');

// jQuery selector, which does not work dynamically

$('select[name=CAM_1_'+i+']').change(function() {
            var ss1=$(this).val()
            alert(ss1)})
</script>

Use event delegation by passing a selector to the on method. It's much more resilient than trying to manage binding and rebinding events. — zzzzBov
– zzzzBov, Commented Aug 28, 2012 at 16:40
Is your code actually missing the }) as above? otherwise it should work jsfiddle.net/mowglisanu/JKRGs — Musa
– Musa, Commented Aug 28, 2012 at 16:49
I see 2-3 questions on this almost daily. So many that I can't even bother to answer. :( — Robin Maben
– Robin Maben, Commented Aug 28, 2012 at 16:52

Naftali · Accepted Answer · 2012-08-28 16:43:58Z

1

The following will detect all changes of all select elements that have a name that starts with CAM_1_ in your tableSelector

$('tableSelector').on('change', 'select[name^="CAM_1_"]', function() {
    alert(this.value);
});

answered Aug 28, 2012 at 16:43

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robin Maben Over a year ago

I guess the starts with selector was the real question then, eh? :)

ForbesLindesay Over a year ago

You're plastering over the top of bugs elsewhere. The code originally posted works fine (when you add the closing brackets). It fails presumably because of some re-use of i in real code.

ForbesLindesay · Accepted Answer · 2012-08-28 16:48:58Z

1

I wanted to replicate your problem, but for me it works completely fine. I did have to add the closing brackets (})) as these seemed to be missing from what you posted. Do you get any errors in the console. Check to see if you get any errors in the JavaScript console and whether you're using the latest version of jQuery.

<table class="table"></table>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
i = 0;
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');

// jQuery selector, which does not work dynamically

$('select[name=CAM_1_'+i+']').change(function() {
    var ss1=$(this).val()
    alert(ss1)
});
</script>

answered Aug 28, 2012 at 16:48

ForbesLindesay

10.8k3 gold badges52 silver badges76 bronze badges

3 Comments

TTT Over a year ago

I forgot to add the }) in the post. Thanks!

ForbesLindesay Over a year ago

I mean is this sufficient to fix your problem? because Neal's answer doesn't make a whole heap of sense given the way you've asked the question. The code in the question now works fine.

TTT Over a year ago

It works now. I messed up 'i' in my real code. But I would like to switch to the 'on' approach.

adeneo · Accepted Answer · 2012-08-28 16:50:36Z

1

<script type="text/javascript">
    $(function() {
        $('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>')
            .appendTo('.table')
            .on('change', function() {
                alert(this.value);
        });
    });
</script>

edited Aug 28, 2012 at 16:50

answered Aug 28, 2012 at 16:42

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Jay Patel · Accepted Answer · 2012-08-28 16:57:39Z

0

<script>
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'"   id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');

// jQuery selector, which does not work dynamically

$('select[name=CAM_1_'+i+']').live("change",function() {
        var ss1=$(this).val()
        alert(ss1)})
</script>

so basically you need to use live method of jquery for dynamically generated html.

answered Aug 28, 2012 at 16:57

Jay Patel

5,7931 gold badge19 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery select JavaScript generated elements

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related