jQuery created function not working

Question

I have a working jQuery function that creates a div when another div is clicked. When this div is clicked...

<div class='col_1' data-parent_id='parent' data-child_id='1002'>List 1</div>

this div is created using the function below and some php.

<div class='col_2' data-parent_id='1002' data-child_id='1003'>List 2</div>

jQuery

$(function() {
   $('.col_1').click(function(){  
     var parent_id = $(this).data("parent_id"); 
     var child_id = $(this).data("child_id");  
     $.post("array-2.php",{parent_id: parent_id, child_id: child_id},
       function(data){
         $('#column_2').empty();
        $('#column_2').append(data);

     });
  });
}); 
$(function() {    ////  New part:Trys to make the created div functional, 
       $('.col_2').click(function(){  
         var parent_id = $(this).data("parent_id"); 
         var child_id = $(this).data("child_id");  
         $.post("array-2.php",{parent_id: parent_id, child_id: child_id},
           function(data){
             $('#column_3').empty();
            $('#column_3').append(data);

         });
      });
    });

I want the new div to function identically as the first div to make a 3rd div/list as well (and even more created columns of lists). So I added the second half of the jQuery but it doesn't seem to function. Does anyone have any ideas why this won't work, or how I could make it better? Thanks.

You can see basically what I'm trying to do here. actual project

score 1 · Accepted Answer · answered Dec 09 '13 at 02:24

Since the col_2 elements are created dynamically you need to use event delegation to register event handlers to these elements.

When you use $('.col_2').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements

$(function () { ////  New part:Trys to make the created div functional, 
    $('#column_2').on('click', '.col_2', function () {
        var parent_id = $(this).data("parent_id");
        var child_id = $(this).data("child_id");
        $.post("array-2.php", {
            parent_id: parent_id,
            child_id: child_id
        },

        function (data) {
            $('#column_3').empty();
            $('#column_3').append(data);

        });
    });
});

Thanks a ton! I spent forever looking for an error, but figured it had something to do with that. Very much appreciated! thanks — user3065173, Dec 09 '13 at 03:48

GemK · Answer 2 · 2013-12-09T10:26:25.117

1

Instead of using $('.col_2').click(function(){..}); Try $(document).on("click",".col_2",function(){..}); Because you are trying to bind click event to an element, even when it is not present in the DOM.

edited Dec 09 '13 at 10:26

answered Dec 09 '13 at 02:31

GemK

852
7
14

Dan · Answer 3 · 2013-12-09T02:51:28.433

0

Try to use this

$(document).on("click",".col_2",function(){
..............
});

rather than

$('.col_2').click(function(){  
..............
});

Check this jsfiddle

edited Dec 09 '13 at 02:51

answered Dec 09 '13 at 02:37

Dan

294
2
8

jQuery created function not working

3 Answers3