添加刷卡事件动态加载的内容与jquery [英] Adding swipe event to dynamically loaded content with jquery

问题描述

下面是一个js拨弄出的问题。

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

在刷卡适用于红色方框不错，但不能在其上pressing新的按钮后，创建了新的蓝盒子。 （跨红框轻扫鼠标的变化）

很抱歉，如果这是一个傻瓜，但我没有找到任何解决方案在线解决了我的具体问题。

在code是从touchSwipe网站

的javascript

  $（函数（）{
  //启用刷卡...
  $（测试）。刷（{
    //通用刷卡处理程序，所有方向
    刷卡：功能（事件，方向，距离，时间，fingerCount）{
      $（本）的.text（你刷卡+方向）;
    }，
    //默认为75像素，设置为0，演示，所以任何距离触发刷卡
     门槛：0
  }）;
}）;

$（文件）。在（'点击'，'按钮'，函数（）{


$（'＆LT; D​​IV CLASS =测试ID =测试2＆GT;刷卡ME＆LT; / DIV＆GT;'）appendTo（身体）。

}）;
 

HTML

 ＆LT; D​​IV CLASS =测试＆GT;刷卡ME＆LT; / DIV＆GT;

＆LT;按钮＆GT;全新＆lt; /按钮＆GT;
 

解决方案

您可以重新连接轻扫事件到新的元素，因为当你添加初始情况下，它们不存在。

尝试这个小提琴。

我添加了一个 addSwipeTo 函数，它接受一个选择器，并添加事件，它匹配。

元素

Here is a js fiddle showing the problem.

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

The swipe works fine on the red box but not on the new blue box which is created after pressing the new button. (swipe across red box with mouse for change)

Sorry if this a dupe but I have not found any solution online which solves my particular issue.

The code is from the touchSwipe site

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>

解决方案

You can reattach the swipe event to the new elements, because they don't exist when you add the initial event.

Try this fiddle.

I added a addSwipeTo function that takes a selector, and adds the event to the elements it matches.

这篇关于添加刷卡事件动态加载的内容与jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！