Question

On my website I add elements to DOM this way

$('#header').load('header.html #template');

So I load the contents of an external html file into the DOM. Then I call

$('.edit').editInPlace({
    callback: function(){
        alert("test");
    }
});

The loaded content contains a h2 with edit css class.

But there is no reaction at all. I tried many edit-in-place plugins. With all I had the same problem. Any ideas why? How do I solve this?

Answer 1

Since the jquery.load() method is async, then although you are calling the editInPlace after you run the load method, the content is still not there. you should use a callback:

$('#header').load('header.html #template',function(){
    $('.edit').editInPlace({
        callback: function(){
        alert("test");
       }
    });
});