JQuery .Change doesn't fire when using Flot JS Bind

Question

I am using JQuery and Flot JS to make a line chart, when I click on a change box, I am trying to rebind the chart.

$("input[type=checkbox]").change(function () {
    console.log("Changed!");


    $.plot($(id), data2, options);
});

The problem I am having is that when I click on the checkbox once, it fires correctly, but as soon as I click on it again or a different checkbox, nothing is fired and as soon as I remove the code

$.plot($(id), data2, options);

and fire it, it works fine.

Is there something that Flot JS does that stops it from triggering the event multiple times?

Answer 1

Try this updated code, I have never used flot before but if there is AJAX involved then it could be a case of Javascript being unable to bind to elements that have been created after DOM load, i.e. after each element has been loaded initially with the page.

$(document).on("change", "input[type=checkbox]", function () 
{
    console.log("Changed!");
    $.plot($(id), data2, options);
});

By looking at the example demos in the link you provided its possible that elements are being created on the fly using AJAX. I could be wrong, worth a shot.