elements created with jquery are not clickable

Question

I have looked though the forum and have not been able to find a solution to my specific problem. I am creating an element from a modal popup window. I can get it to display on the page but its not clickable.

I have jquery code running in two separate files to be able to do what I need for the application.

What happens is I have an "edit" icon that gets loaded onto each element at load. This works fine and when you click it creates the modal box and loads "page 2". All of the functionality inside there works properly. When the user clicks "update" the box closes and fires the "append_elements" function from "page 1" and loads up the new icon. However this edit icon that was just added doesn't click.

I have tried using on() in various places but have not had any luck getting it to work.

Thanks Eric

Page 1:

$(document).ready(function(){ 
  append_elements();

  $('.cms_edit').on('click', function(){
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask_temp').css({'width':maskWidth,'height':maskHeight});
    $('#mask_temp').fadeIn(1000); 

    var winH = $(window).height();
    var winW = $(window).width();

    var content_object = { 'content' : $(this).parent().html(), 'item_id' :  $(this).parent().data("item") }

    $('#modal_temp').load('/content-edit.php', content_object);

    $('#modal_temp').css('top',  winH/2-$("#modal_temp").height()/2);
    $('#modal_temp').css('left', winW/2-$("#modal_temp").width()/2);      

    $('#modal_temp').fadeIn(500);
  });
});

function append_elements()
{
    $('.cms_edit').appendTo('.editable').show();
}

Page 2:

$('#update').click(function(){
    var value = CKEDITOR.instances['page_text'].getData();
    var item = $('#prev_id').val();

    var elem = '<div class="cms_edit"><em class="icon-edit"></em></div>';

    $('#item_' + item , parent.document).html(value);

    $('#modal_temp', parent.document).fadeOut(500);
    $('#mask_temp', parent.document).fadeOut(500);

    parent.append_elements();
});

score 1 · Answer 1 · answered Jun 10 '13 at 20:02

Change

$('.cms_edit').on('click', function(){

to

$('.editable').on('click', '.cms_edit', function(){

The jQuery set receives the event then delegates it to elements matching the selector given as argument. This means that contrary to when using live, the jQuery set elements must exist when you execute the code.

score 1 · Answer 2 · answered Jun 10 '13 at 20:02

1

Delegate the event to the parent container

$(staticContainer).on('click', '.cms_edit', function(){

staticContainer is the closest ancestor of the elements , to which the click event have been defined.

Make sure you select a container that is already present on the page at the when the event is bound.

answered Jun 10 '13 at 20:02

Sushanth --

55,259
9
66
105

@EricReynolds .. You are welcome :) – Sushanth -- Jun 10 '13 at 20:09

score 0 · Answer 3 · answered Jun 10 '13 at 20:06

You might want to consider using delegated Events. This can be done with .on() like so:

$(document).on('click', '.cms-edit', function(){ ... });

What does this do?

The code above, delegates the event handler. By attaching the event handler to a static element, or one that already exists, like the document or the parent you append the elements to, it delegates the event to all current nodes and future nodes dynamically added that match the selector. This is especially helpful when it comes to AJAX loaded content.

See this link for more details: .on().

elements created with jquery are not clickable

3 Answers3