CODEWITHSUNDEEP
javascriptjquerytouch
Marius Djerv
Marius Djerv

Reputation: 265

TouchSwipe on jQuery list

I have been testing out the TouchSwipe plugin from: http://labs.rampinteractive.co.uk/touchSwipe/demos/ and it works just how I want it do to. But for some reason its not working on a list-elements that I append from another script file.

Let's see the code from the first file where I make the list: 

$('#list').append('<li class="test" style="width: 400px; height: 200px; background-color: blue;">' + response.name + '</li>');

And then I include the main.js file where I have all my main functions:

  $(document).ready(function(){
     $(".test").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount) {
        if(direction == 'left'){
            $(this).css('background-color', 'red'); 
        } else if(direction == 'right'){
            $(this).css('background-color', 'green');
        }

    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });

});

The script works fine on list elements that I make straight in the HTML file, but not on the list elements on what I print out from my first file with the responses.

Any idea of what Im missing or doing wrong? :)

Thanks in advance!

Upvotes: 1

Views: 685

Answers (1)

Felix
Felix

Reputation: 38102

You can use a custom function to reattach the swipe event to the new elements:

$(function() {
    var addSwipeTo = function(selector) {  
         $(selector).swipe("destroy");
         $(selector).swipe({
            //Generic swipe handler for all directions
            swipe:function(event, direction, distance, duration, fingerCount) {
              $(this).text("You swiped " + direction );  
            },
             threshold:0
          });
    };
    addSwipeTo(".test");

    $(document).on('click','button',function(){
       $('#list').append('<li class="test" style="width: 400px; height: 200px; background-color: blue;">New Item</li>');
       addSwipeTo(".test");
    });

});

Fiddle Demo

Upvotes: 2

Related Questions