Question

Basically this is my function:

function FillDivLeft(groups, side) {
 var cnt = 1;
 $.each(groups, function (index, groups) {
     $(side)
     .append(
         $(document.createElement('label')).attr({
             id: cnt + 'lbl',
             class: 'myClass'
         })
     );
     $('#' + cnt + 'lbl')
     .append(
         $(document.createElement('input')).attr({
             id: groups.GroupCode,
             type: 'checkbox',
             name: 'testGroup',
             class: 'leftClass'
         })
     );
     $('#' + groups.GroupCode).after
     (
         $(document.createElement('span')).text(groups.GroupName).attr({
             class: 'leftSpan'
         })
     );
     $('#' + cnt + 'lbl').after($(document.createElement('br')));
     cnt = cnt + 1;
 }); 
}

I have tried all sorts and although the new elements are created, classes assigned etc. it appears that all jquery functions on the page do not work, such as:

$('.leftSpan').click(function () {
    $('#lblOutput').text(this.id);
});

Even a hover function on the parent div does not work.

I can’t see a possible cause so any help or pointers would be appreciated.

Answer 1

You need to use ‘on’ if you are using jQuery 1.7+. You can replace ‘body’ with any parent div of the element

$('body').on('click','.leftSpan',(function () {
    $('#lblOutput').text(this.id);
});

Using just the .click function requires the elements to be created when the dom is ready. It will not attach the event to elements created dynamically. If you are using jQuery 1.6 and below you will have to use the .live instead

You can read more about ‘on’ here http://api.jquery.com/on/