排序输入框向上/向下移动仅适用于第一组按钮答案

【问题标题】：Sort input box move UP/Down works only for first set of buttons排序输入框向上/向下移动仅适用于第一组按钮
【发布时间】：2013-06-11 11:11:32
【问题描述】：

我已经合并了我最近的两个演示，现在发生了冲突。

这是我的 2 个演示

添加多个输入框DEMO
向上/向下排序 - DEMO

Merged demo

如果您查看合并的演示，排序选项仅适用于第一个输入框。这意味着您只能向上和向下移动第一个文本框，各个文本框的其他向上/向下按钮根本不起作用。

我需要它作为向上/向下排序演示，所有按钮都应该可以向上或向下移动相应的输入框。

提前致谢！！

代码

$(document).ready(function(){

     $(":radio").click(function(){
         $(".test").hide();
         var show = $(this).attr("data-show");
         $("#"+show).show(300)
     });

        $filtr = $('.filtr');

        $filtr.on('click', '.add', function(){
            $(this).closest('.loop').clone().appendTo( $(this).closest('.test') );
        });

        $filtr.on('click', '.del', function(){
           $(this).closest('.loop').remove();
        });

        $('#1lev, #2lev, #3lev').hide();

     //For sort up/down
     function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0)
        return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveDown(item) {
    var next = item.next();
    if (next.length == 0)
        return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

$(".filtr").sortable({ items: ".loop", distance: 10 });
$('button').click(function() { 
    var btn = $(this);
    var val = btn.val();
    if (val == 'up')
        moveUp(btn.parents('.loop'));
    else
        moveDown(btn.parents('.loop'));
});

});

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

请看http://jsfiddle.net/VMBtC/7/

我只修改了一行

$(document).on("click", "button", function() {

这是您的要求吗？让我知道你的 cmets。

【讨论】：

我认为 $("button").on("click", function() { 应该也可以，但你不能解释一下
是的，这就是我需要的。你能解释一下吗？
请将此查询添加到您的问题中
基本上这是因为 .click 仅在调用时将事件附加到已存在的按钮，但是当您移动对象时，它会重新创建导致事件解除附加的按钮。 on (.live) 监视 DOM 并附加元素，即使它们在调用后添加到 DOM。我个人在 html 中使用事件，例如
@Onur

【解决方案2】：

选择最近的父选择器，而不是文档选择器

$('.filtr').on('click','button' ,(function() {

为了研究两者的区别可以看this 您还可以阅读.on event 的直接和委托事件部分

【讨论】：