Sort input box move UP/Down works only for first set of buttons

Question

I have merged my last two demos and now there is a conflict.

Here is my 2 demos

Adding multiple input boxes DEMO
Sort Up/Down - DEMO

If you look at merged demo, the sort option is working only for first input box. Which mean you can move only first text box to up and down, other up/down button of respective text boxes are not working at all.

I need it to work as the sort Up/Down demo, all the button should work to move respective input boxes up or down.

Thanks in advance!!

Code

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

});

score 1 · Accepted Answer · answered Jun 11 '13 at 11:29

1

Please have a look at http://jsfiddle.net/VMBtC/7/

I did changes in only one line

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

Is this your requirement? Let me know your comments.

answered Jun 11 '13 at 11:29

vinothini

2,606
4
27
42

I think $("button").on("click", function() { should also work but it is not can you explain – Tassadaque Jun 11 '13 at 11:34
Yes this is what I need. Could you pls explain? – Sowmya Jun 11 '13 at 11:35
Plz add this query to your question – Tassadaque Jun 11 '13 at 11:38
basically it is because .click only attaches the events to already existed button when it is called but when you move the objects it re create the buttons which cause de-attach of the events on the other hand .on (.live) watches the DOM and also attach element even they added to DOM after call. I personally use event in the html like – Onur Topal Jun 11 '13 at 12:37
@Onur – Tassadaque Jun 11 '13 at 15:29

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

Instead of document selector choose the closest parent selector

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

In order to study the difference between the two you can see this You may also read Direct and delegated events section of .on event

edited May 23 '17 at 11:43

Community

1
1

answered Jun 11 '13 at 12:22

Tassadaque

8,129
13
57
89

Sort input box move UP/Down works only for first set of buttons

2 Answers2