Как я могу перехватывать события touchmove для элемента, который добавляется в DOM после того, как мой палец уже находится на экране?

Подводя итог, вы, кажется, хотите:

• on touchstart: для отображения и позиционирования стилизованного элемента div.
• on touchmove: перетаскивание элемента не отпуская и не нажимая повторно кнопку мыши.

Если эта интерпретация верна, то ответ заключается в том, чтобы обрабатывать события touchmove для того же элемента, на который был первоначально нажат, а именно на элемент "body". Нет необходимости обрабатывать события touchmove элемента, который вы хотите перетащить (добавленный элемент).

Должно быть много способов написать код. Вот один из них, который, вероятно, не совсем то, что вам нужно (в основном в математике позиционирования), но его легко адаптировать:

var $element = $("<div class='element' />");

$("body").on({
    'touchstart mousedown': function (e) {
        $element.appendTo("body");
        $(this).on('touchmove mousemove', move);
        move(e);//you could do `$(this).trigger('touchmove', e)` but a conventional function call keeps `move` simple.
    },
    'touchend mouseup': function (e) {
        $(this).off('touchmove mousemove');
    }
});

function move(e) {
    $element.css({
        left: (e.pageX - 10) + 'px',
        top: (e.pageY - 10) + 'px',
        cursor: 'pointer'
    });
}

mousedown/mousemove/mouseup позволяют тестировать настольные компьютеры и могут быть удалены для использования на сенсорных устройствах.

ДЕМО

Если вам просто нужно, чтобы он срабатывал один раз, то это довольно просто

function addElement() {
    $( "body" ).append( element );

    element.on( "touchmove", doStuff );
    element.trigger("touchmove"); 
}

http://jsfiddle.net/rx4qdtuj/8/

Я проверил это на симуляторе ipad. Я заменил предупреждение на добавление, чтобы вы не получали постоянное предупреждение на iPad.

Если вы хотите, чтобы он постоянно срабатывал, единственная возможная вещь, о которой я могу думать, это подделать touchmove на созданном элементе.

http://jsfiddle.net/rx4qdtuj/9/

var element = $("<div class='element' />");

$( "body" ).on( "touchstart", addElement );
$(".wrapper").on("touchmove", addElement);

function addElement() {
    $( "body" ).append( element );

    element.on( "touchmove", doStuff );
    element.trigger("touchmove"); 
}

function doStuff() {
    $('body').append('a ')
}

HTML

<div class="wrapper"></div>

CSS

.wrapper {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
}

Движение фактически срабатывает в уже созданной оболочке div, которая находится в том же месте, что и созданный элемент.

см. документацию по функции перетаскивания

применить вашу функцию

<div id="track" class="track">
<div id="box2" style="left:0; top:0">Drag Me</div>
</div>

родной javascript

window.addEventListener('load', function(){

 var box2 = document.getElementById('box2'),
 boxleft, // left position of moving box
 startx, // starting x coordinate of touch point
 dist = 0, // distance traveled by touch point
 touchobj = null // Touch object holder

 box2.addEventListener('touchstart', function(e){
  touchobj = e.changedTouches[0] // reference first touch point
  boxleft = parseInt(box2.style.left) // get left position of box
  startx = parseInt(touchobj.clientX) // get x coord of touch point
  e.preventDefault() // prevent default click behavior
 }, false)

 box2.addEventListener('touchmove', function(e){
  touchobj = e.changedTouches[0] // reference first touch point for this event
  var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point
 // move box according to starting pos plus dist
 // with lower limit 0 and upper limit 380 so it doesn't move outside track:
  box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px'
  e.preventDefault()
 }, false)

}, false)