document on change fired twice

document on change fired twice

Hi,

I am looking for a solution for a jquery mobile events.

I created a multi-page website. One Of them contain a list of slider elements created "on the fly".
Each time I go to this page, I delete every li elements and I create a new time all of my li elements (and of course my input type=slider elements) because content can change.

For instance , this is a element of the list :

  1.  '<li data-role="list-divider">Element<label for="flip-'+key+'"></label><select name="flip-'+key+'" id="flip-'+key+'" data-identity="'+key+'" data-role="slider" data-mini="true"><option value="off" '+select1+'>off</option><option value="on" '+select2+'>on</option></select></li>';

And of course I create an event for each slider input elements I have to display:

  1. $(document).on("change", "#flip-"+key, function () {
  2.  var json = {
  3.   device : obj.value.body.device,
  4.   command : $(this).val()
  5.  }
  6.  deviceController_gtc(obj.value.bodyName, json);
  7. });


So each time I navigate to another page, if I come back to the previous one, the input element is deleted and created again. But the "on change" event still exists on the DOM. So if I click on the slider, event is fired twice, or more times as long as I navigate to the page...

I tried to check if the element already exists. Of course not, because I delete it each time I go to the page. So the on change event is created again...  

if($("#flip-"+key).length == 0) {
 // the previous js code
}

Thank you so much for your help