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应用{1}}，因为jQuery选择器当前仅在启动时执行。您可以执行以下操作：

.click()

更新：由于您需要将$('.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()选择器。我更新了your fiddle。

Answer 2

为所有按钮添加全局处理程序：

$(".FieldContainer").on("click", "button", function(){console.log("works")})

Answer 3

您在绑定事件后添加元素。如果要在动态添加的元素上使用相同的事件，则需要在添加后将点击绑定到这些按钮

Answer 4

$('.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>');

    $(".FieldContainer").sortable("destroy");
    $(".FieldContainer").sortable({
        items: ".OrderingField",
        distance: 10
    });

});

Jquery可以使用动态div上的向上箭头进行排序

4 个答案: