jQuery new elements not recognised

Question

After a form submit (http post), I create a new form on the same php page. The newly generated elements (buttons, label, sliders) are not recognised in the jquery event. The jquery works before submitting, but not after.

$("#sliders").on("change", function(){
    var SliderValue = $("#slider0").val();
    if (SliderValue==10){
        $('#submit_next').button('enable');
    }
    else
        $('#submit_next').button('disable');
        $("#lblsum_scores").text(SliderValue+'/10');
});

Probably a dupe of http://stackoverflow.com/questions/15090942/jquery-on-not-working-on-dynamic-content — Denys Séguret, Mar 18 '13 at 16:28
Your `else` block needs to be surrounded by curly braces, presuming that the `$("#lblsum_scores").text(SliderValue+'/10');` bit is only relevant to the non-specific case. — Xophmeister, Mar 18 '13 at 16:32
The event is called. But the buttons, slider and label are not recognised. — user2182429, Mar 18 '13 at 16:33
The whole code works before submitting. else statement is correct — user2182429, Mar 18 '13 at 16:34

score 2 · Answer 1 · answered Mar 18 '13 at 16:33

2

You need to delegate the events to the new created elements

instead of:

$("#sliders").on("change", function(){

you should use:

$("parentOfSliderNotGenerated").on("change", "#sliders", function(){

for more info, read http://api.jquery.com/on/

answered Mar 18 '13 at 16:33

Simon Arnold

15,849
7
67
85

This doesn't fix the problem.. It works before submitting, but after submitting and rebuilding the form, the jquery doesn't work. – user2182429 Mar 18 '13 at 16:53
1

@user2182429 What you are describing as the problem should be fixed with the above code. Make sure `parentOfSliderNotGenerated` is a selector for an element that does not get regenerated. If all else fails, try using `$(document).on("change","#sliders", function(){` – Kevin B Mar 18 '13 at 17:01
but everything is regenerated.. That should be the problem then? – user2182429 Mar 18 '13 at 17:04
1

You need to bind to the element that *isn't* being regenerated. If you have to go so far as binding to the `body` element, that's where you'll have to bind. – user229044 Mar 18 '13 at 17:07
I tried $("body div#page1 div form#form1").on("change", "#sliders", function(){.. But still same result.. – user2182429 Mar 18 '13 at 17:09
The event is handled, but the label e.g. is not recognised. Can I also delegate the label? – user2182429 Mar 18 '13 at 17:12
well it's also a lot of php. I cannot put the whole code online, but could sent it by email.. – user2182429 Mar 18 '13 at 17:20

jQuery new elements not recognised

1 Answers1