javascript - Jquery 可使用动态 div 上的上下箭头进行排序

Question

我正在使用脚本生成 div 框:

$('.FieldContainer a.add').click(function(){
   $('.FieldContainer').append(
      '<div class="OrderingField">'+
      '<div class="LeftFloat">'+
      'Item'+
      '</div>'+
      '<div class="RightFloat Commands">'+
      '<button value="up" >Up</button>'+
      '<button value="down" >Down</button>'+
      '</div>'+
      '</div>'
   );
});

这是我的 jsfiddle http://jsfiddle.net/maziar/P2XDc/链接

上下按钮适用于预加载的 div 元素，但使用上述脚本生成的 div 元素无法使用该按钮上下移动。

如何纠正这个问题？

编辑:

工作示例: http://jsfiddle.net/P2XDc/182/

Answer 1

您还需要在新创建的 div 上应用启动时执行的 .click()，因为 jQuery 选择器当前仅在启动时执行。您可以按如下方式执行此操作:

$('.FieldContainer a.add').click(function(){
    $('.FieldContainer').append(
        '<div class="OrderingField">'+
        '<div class="LeftFloat">'+
        'Item'+
        '</div>'+
        '<div class="RightFloat Commands">'+
        '<button value="up" >Up</button>'+
        '<button value="down" >Down</button>'+
        '</div>'+
        '</div>'
    ).find('button').click(function() { 
        var btn = $(this);
        var val = btn.val();
        if (val == 'up')
            moveUp(btn.parents('.OrderingField'));
        else
            moveDown(btn.parents('.OrderingField'));
    });
});

更新:由于您的 click() 需要应用于按钮，因此我插入了 find('button') 选择器。我更新了your fiddle .