TouchSwipe jQuery的名單

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