jquery function stops working after adding div

Question

K I'm having some issues. I need to get the below to work. I'm very new to jquery/php but I have a drag and drop thats dragging into sortable-list. However the below is not working.. The before "group" is called "squad". The call is below

echo "<p><input type=\"submit\" class=\"input-button\" id=\"btn-add\" value=\"Add Squad\" /></p>";

Then I have the function written as:

$(function(){
        var count = 2;  
        $('#btn-add').click(function(){
            if(count == 5){
               $('.groupA').append('<div class="groupB"><div class="column left" style="color: darkorange;"><input  type="text" name="S' +count+ '" value="Squad ' +count+ '" style="text-align: center; width:151;"></center><ul class="sortable-list"></ul></div>');

               if(count > 11){
                  $('#btn-add').hide();
               } 
            } else if(count == 9){
                $('.groupB').append('<div class="groupC"><div class="column left" style="color: darkorange;"><input  type="text" name="S' +count+ '" value="Squad ' +count+ '" style="text-align: center; width:151;"></center><ul class="sortable-list"></ul></div>');
            }else {
               if(count > 11){
                  $('#btn-add').hide();
               } 
                if (count > 9)
                    $('.groupC').append('<div class="column left" style="color: darkorange;"><input  type="text" name="S' +count+ '" value="Squad ' +count+ '" style="text-align: center; width:151;"></center><ul class="sortable-list"></ul></div>');
                else if (count > 4)
                    $('.groupB').append('<div class="column left" style="color: darkorange;"><input  type="text" name="S' +count+ '" value="Squad ' +count+ '" style="text-align: center; width:151;"></center><ul class="sortable-list"></ul></div>');
                else 
                    $('.groupA').append('<div class="column left" style="color: darkorange;"><input  type="text" name="S' +count+ '" value="Squad ' +count+ '" style="text-align: center; width:151;"></center><ul class="sortable-list"></ul></div>');
            }
            count++;
        });
    });

Now I have edited this as Felix fixed my initial issue but now that I have the div fixed, all of my drag and drop is not working anymore. I have manually put one in via php and the drag and drop works for that one, but the ones created using the add button don't work. What am I missing?

Any help is appreciated.

Felix · Accepted Answer · 2014-04-07 02:21:14Z

1

Try to use event delegation here:

$(function(){
    var count = 1;  
    $('body').on('click','#btn-add', function() {
        // Your code here
    });
});

You also need to use $('.groups') instead of $('groups')

answered Apr 7, 2014 at 2:21

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shawn V Over a year ago

Felix, Turns out all my issues were just the $('.groups') Thank you. But it has created a new issue in that the drag and drop function doesn't work anymore.

Shawn V · Accepted Answer · 2014-04-07 18:32:08Z

0

I didn't find a way around the jquery drag and drop not working. after adding a DIV. However. I found that if I added all the divs and hid them all, and then used a jquery button to unhide them. That this actually worked, and there were no more bugs/issues. I hope this helps someone else looking for the same answers.

answered Apr 7, 2014 at 18:32

Shawn V

1278 bronze badges

Collectives™ on Stack Overflow

jquery function stops working after adding div

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related