TouchSwipe on jQuery list

Question

我一直在测试TouchSwipe插件从：http://labs.rampinteractive.co.uk/touchSwipe/demos/和它的工作方式，我希望它做。但出于某种原因，它不能处理列表元素，我从另一个脚本文件中追加了这些元素。

让我们看看我列出列表的第一个文件中的代码：

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

然后，我包含了main.js文件，其中我有我所有的主要功能：

  $(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
  });

})；

该脚本可以很好地处理我在HTML文件中直接生成的列表元素，但是对于我从第一个文件中打印出来的带有响应的列表元素来说，这个脚本工作得很好。

你知道我错过了什么或做错了什么吗？)

提前感谢！

Answer 1

可以使用自定义函数将swipe事件重新附加到新元素：

$(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");
    });

});

小提琴演示