javascript - jQuery 列表上的 TouchSwipe

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

您可以使用自定义函数将滑动事件重新附加到新元素:

$(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