使用jquery将滑动事件添加到动态加载的内容中

Question

这是一个显示问题的小提琴。

http://jsfiddle.net/4CLqY/4/

滑动在红色框上正常工作，但在按下新按钮后创建的新蓝框上没有。 （用鼠标滑过红框以便更改）

很抱歉，如果这是一个骗局，但我没有在网上找到解决我的特定问题的任何解决方案。

代码来自touchSwipe网站

javascript

 $(function() {      
  //Enable swiping...
  $(".test").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount) {
      $(this).text("You swiped " + direction );  
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });
});

$(document).on('click','button',function(){


$('<div class="test" id="test2">Swipe me</div>').appendTo('body');

});     

HTML

<div class="test">Swipe me</div>

<button>New</button>

Answer 1

您可以将滑动事件重新附加到新元素，因为添加初始事件时它们不存在。

尝试this fiddle。

我添加了一个带有选择器的addSwipeTo函数，并将事件添加到它匹配的元素中。