I want to load some html elements from another html document to another. There is no access-origin problem. The elements (<img>) are appearing on the "hosting" html page, but they lose all JS capability - for example, they don't respond on click. Why is it happening and how can I solve it? I tried inserting the .load method at the start\end\inside .ready to no avail.
Thanks in advance.
When you update the DOM dynamically using jQuery AJAX, it won't respond to any event. Because it is added after the HTML was render.
To achieve this you need to bind the event on each and every element added dynamically. For example on img click you can use following code.
$(document).ready(function(){
$(document).on("click","img",function(){
//It will bind click event on each img element added before or after DOM rendering
});
});
Same way you can bind multiple events on any element.
