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 :
- '<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:
- $(document).on("change", "#flip-"+key, function () {
- var json = {
- device : obj.value.body.device,
- command : $(this).val()
- }
- deviceController_gtc(obj.value.bodyName, json);
- });
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