Question

我正在使用touchSwipe jQuery Plugin获取一点WebApp。不幸的是，它不适用于动态添加的元素（例如通过AJAX）。

好吧，我查看了代码，发现了类似的内容：

$element.bind(START_EV, touchStart);
$element.bind(CANCEL_EV, touchCancel);

如何绑定事件以便它们也可用于动态添加的元素？

Answer 1

使用on和委派的事件：

$(document).on('event', 'element_selector', function(){
    // do when event happens
});

但对于该插件，可能必须在将新事件添加到页面时将事件附加到新对象。

Answer 2

有关在这种情况下使用.on的更多详细信息，如example in this post所示：

$("#boxes").on('mouseover','.box', function() {
    $(this).trigger('swiping');
});

$("#boxes").on('swiping','.box', function() {
    var $this = $(this);
    $this.swipe({
        swipe: function(event, direction, distance, duration, fingerCount) {
            $this.text("You swiped " + direction );
        }
});

在上面的代码段中，动态创建了新的.box元素。您创建一个'swiping'事件，并在悬停时触发.box元素（包括通过AJAX添加的新元素等）。然后，第二部分监视'swiping'事件，并为.swipe()元素附加插件的.box包。

如何在添加了ajax的元素上绑定触摸事件

2 个答案: