Question

我一直在测试来自：http://labs.rampinteractive.co.uk/touchSwipe/demos/的TouchSwipe插件，它的功能正是我想要的。但由于某种原因，它没有处理我从另一个脚本文件追加的列表元素。

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

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

在jQuery列表上的TouchSwipe

1 个答案: