Micky Shaked Micky Shaked - 5 months ago 17
jQuery Question

jquery dblclick() and keyup() functions not...functioning

I am trying to make a clone of Instagram with the functionality of "liking" a photo by double-clicking and entering comments into a comment field. I have the
following functions:

$('.image').click(function(){
$('this').closest("#instagram-wrap").find(".like").append("mickyshaked");
});


and

$('textarea').keyup(function(event) {
if((event.keyCode || event.which) == 13){
$(this).closest("instagram-wrap").find(".comments").append('<div class="comments">'+$(this).val()+'</div>');
$(this).val("Add a comment...");
return false;
}
});


written both inside and out of the $(document).ready(function()...

I've also tried binding the keyup function to the textarea by its class but when I press enter it just goes to the next line. The dblclick doesn't work on the photo either, which should add the "username" to the list of users who have already liked it.

EDIT
Here is the get request that retrieves the sample feed:

function loadInstagram(url){
$(function() {
$.ajax({
type: 'GET',
dataType: 'json',
cache: false,
url: url,
success: function(data) {
console.log('data.length: ',data.length);
console.log('data[0]: ', data[0])
count = data.length;
var likeCount = {};
for(var i = 0; i < count; i++) {
var photoURL = (data[i]);
likeCount[photoURL] = 0;
console.log(photoURL);
$('#instagram').append('<div class="instagram-wrap"><img class="image" src="'+photoURL+'"/><div class="likeWrap"><span class="likesIcon">♥</span><span class="likeNames"></span></div><div class="comments">Comments section</div><textarea class="commentarea" placeholder="Add a comment..."></textarea></div>');
}
}
})
})
};

Answer

Your code is not working because there are a lot of mistakes in it.

  1. inside your click handler for the .image element, you wrapped the this keyword in single-quotes when you shouldn't.
  2. inside your keyup handler for the textarea, you forgot to add the # for instagram-wrap so that it selects the element by its ID.

Anyway, here's how I made that work (jsfiddle: here). If we're saying you want a double-click functionality, so use the dblclick event instead of click.

Also, you are appending a .comments element inside another .comments element everytime Enter is pressed on the textbox. That will result to all the comments being nested on each other. I think you just want the .comments element to be the wrapper and each comment be just .comment.

PS: I don't know your HTML structure so I just assumed it based on your javascript.