2

I'm creating a web chat page using PHP and jQuery, and I am adding an emoticon feature, which everything is done except for the jQuery portion. My problem is I'm not getting a click event when I click on the emoticon image. In the handler it is supposed to get the current message value, get the text version of the emoticon from the 'alt' attribute, and set the textbox value to its previous value + the emoticons text appended.

Here is what I tried:

(Each button appears as so: <img class="embtn" src="emoticons/happy.gif" alt=":)" />)

$(document).ready(function(){
    // Insert Emoticon
    $(".embtn").click(function(event){
        var prevMsg = $("#usermsg").val();
        var emotiText = event.target.attr("alt");
        $("#usermsg").val(prevMsg + emotiText);
    });
});

How should I go about doing this?

The version of jQuery I am using is 1.3.

5
  • 2
    You're not getting a click event at all? Try to isolate your problem - if you're not getting a click event, then none of the code inside the click function is relevant. It would help if you could set up a jsfiddle. Sep 7, 2012 at 2:16
  • The JSFiddle I tried simply using the confirm() method to test it, it still is not working. Sep 7, 2012 at 2:23
  • Okay so it handles the click event on my site but not on JSFiddle, strange. Sep 7, 2012 at 2:27
  • 2
    I fixed it for you - the code needed to be in the document ready function, and you need to choose to include jQuery in the jsfiddle. jsfiddle.net/hmartiro/mZTPw/3 Sep 7, 2012 at 2:27
  • facepalm I had it in the document ready function in my actual script but forgot to in the JSFiddle. Sep 7, 2012 at 2:30

1 Answer 1

5

Try changing:

var emotiText = event.target.attr("alt");

to:

var emotiText = $(event.target).attr("alt");

In the future check the console for errors when you are stumped.

5
  • I did not think of checking the console, mainly because I did not know where to find it but in chrome it is right-click inspect-element. And Thanks! The click event does not work in my JSFiddle but I just tested it on my site for good measure and it works now, thank you very much :) Sep 7, 2012 at 2:26
  • 2
    I often develop with the console open all the time. Glad I can help. Sep 7, 2012 at 2:29
  • Well, I don't feel I should post a separate question for this since it would have the same tags and is for the same purpose. How would I go about making the emoticon clickable without losing focus to the textbox? I figure the only way is to explicitly set focus to the textbox in my click function but how would I ensure that the caret is placed exactly where it was (offset by the amount of characters the emoticon inserts), furthermore how would I insert the emoticon at the caret position instead of just at the end of the textbox? Sep 7, 2012 at 2:37
  • 1
    This might help Sep 7, 2012 at 2:43
  • Great stuff! I really should have done a search though, but that is EXACTLY what I am looking for. Sep 7, 2012 at 2:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.