Agregar evento de deslizamiento a contenido cargado dinámicamente con jquery

Aquí hay un violín js que muestra el problema.

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

El deslizamiento funciona bien en el cuadro rojo, pero no en el nuevo cuadro azul que se crea después de presionar el nuevo button. (pase el mouse por la caja roja con el mouse para cambiar)

Lo siento si esto es una tontería pero no he encontrado ninguna solución en línea que resuelva mi problema en particular.

El código es del sitio 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> 

Puede volver a conectar el evento de deslizamiento a los nuevos elementos, porque no existen cuando agrega el evento inicial.

Prueba este violín .

addSwipeTo una function addSwipeTo que toma un selector y agrega el evento a los elementos con los que coincide.