I have the following markup:
<div class="user-photo">
<img src="" />
</div>
I want to insert an image in that div when I click another image on a page. My code looks like this:
$('body').on('click', '.image', function() {
$('.user-photo').children('img').attr('src', $(this).attr('src'));
});
But it is not working
demo: http://jsfiddle.net/WnC9B/8/
$('body').on('click', '.image', function(e) {
$('.user-photo').children('img').attr('src', $(e.target).attr('src'));
});
I think you are using this in the wrong way (this refers to the bodyin this example, you should use e.target to refer to the clicked element)
$('body').on('click', '.image', function(e) {
$('.user-photo > img').attr('src', $(e.target).attr('src'));
});
You can use the .tmpl() of jquery. It will be used to append html content in div in your case.
$.tmpl("<div class="user-photo"> <img src='' /> </div>")..appendTo("#targetdiv");
Another way is:
$('#div').html('<div class="user-photo"> <img src='' /> </div>')
