Question

I’m running Drupal 7 with JQuery and Node.js. I want an event to happen in a div onclick event. However, it won’t work on a class, although it works if I use the parent div id.

The line that I’m having trouble with is:

    $(document).ready(function() {

  $('.chatNickname').click(function(){ 
alert("hello");
  });

The code snippet works in jsfiddle..not sure what the problem is.
The entire code is below:

<script src="http://<?php print $_SERVER['SERVER_ADDR'] ?>:8080/socket.io/socket.io.js"></script>
<script>
  (function($){
    var myNick = 'me';
    var newlyJoined = true;
    var socket = io.connect('http://<?php print $_SERVER['SERVER_ADDR'] ?>:8080');

    socket.on('connect', function () {
      $('#chat').addClass('connected');
    });

    socket.on('announcement', function (msg) {
      $('#lines').append($('<p>').append($('<em>').text(msg)));
    });

    socket.on('nicknames', function (nicknames) {
    $('#nicknames').empty().append($('<span>Online: </span>'));
      for (var i in nicknames) {
    $('#nicknames').append($('<div class="chatNickname" id="' + nicknames[i] + '">').text(nicknames[i]));
      }
    });

    socket.on('user message', message);
    socket.on('reconnect', function () {
      $('#lines').remove();
      message('System', 'Reconnected to the server');
    });

    socket.on('reconnecting', function () {
      message('System', 'Attempting to re-connect to the server');
    });

    socket.on('error', function (e) {
      message('System', e ? e : 'A unknown error occurred');
    });

    socket.on('chat log', function(chatlog) {
      if (newlyJoined) {
    var i = 0;
    for (stamp in chatlog) {
      if (chatlog[stamp].type == 'user message') {
        var ts   = tstamp(stamp);
        var nick = chatlog[stamp].nick
        var msg  = chatlog[stamp].msg
        message(ts, nick, msg);
        i++;
      }
    }
    if (i > 0) {
      $('#lines').append($('<hr>')).append($('<small style="text-align:center; display:block; color: #888;">').text('Chat messages posted within the past half hour appear above this line.')).append($('<hr>'));
      $('#lines').get(0).scrollTop = 10000000;       
    }
    newlyJoined = false;
      }
    });

    function message (msg_time, from, msg) {
      $('#lines').append($('<p>').append($('<small>').text(msg_time)).append($('<b>').text(from), linkify(msg)));
    }

    function linkify(inputText) {
      //URLs starting with http://, https://, or ftp://
      var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
      var replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

      //URLs starting with www. (without // before it, or it'd re-link the ones done above)
      var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
      var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

      //Change email addresses to mailto:: links
      var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
      var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

      return replacedText
    }

    function tstamp(stamp) {
      var currentTime = new Date(); 
      if (typeof stamp != 'undefined') {
    currentTime.setTime(stamp);
      }
      var days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat');
      var day = currentTime.getDay();
      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      if (minutes < 10) {
    minutes = "0" + minutes;
      }
      if (hours > 11) {
    var ap = 'p';
      }
      else {
    var ap = 'a';
      }
      if (hours > 12) {
    hours = hours - 12;
      }
      return "["+ days[day] + " " + hours + ":" + minutes + ap + "m] ";
    }

    $(document).ready(function() {

      $('#nicknames .chatNickname').click(function(){ 
    alert("hello");
      });

      $('input#message').focus(function() {
    if ($(this).val() == 'Type your chat messages here...') {
      $(this).val('');
    }
      });

      $('input#show-timestamps').click(function() {
    if ($(this).is(':checked')) {
      $('#messages p small').show();
    }
    else {
      $('#messages p small').hide();
    }
      })

      socket.emit('nickname', '<?php print $username ?>', function (nick) {
    if (nick != 'me') {
      myNick = nick;
      socket.emit('get log');          
      return $('#chat').addClass('nickname-set');
    }
      });

      $('#send-message').submit(function () {
    message(tstamp(), myNick, $('#message').val());
    socket.emit('user message', $('#message').val());
    clear();
    $('#lines').get(0).scrollTop = 10000000;
    return false;
      });

      function clear () {
    $('#message').val('').focus();
      };

    });
  })(jQuery);
</script>
<div id="chat">
  <div id="messages">
    <div id="nicknames">
    </div>
    <div id="lines">
    </div>
  </div>
  <form id="send-message" autocomplete="off">
    <input id="message" type="text" value="Type your chat messages here..." autocomplete="off" />
    <button>Send</button>
  </form>
</div>
<small><input id="show-timestamps" type="checkbox" checked="checked" /> Show timestamps</small>

Answer 1

You’re using sockets and appending the element after the click handler has been attached. That means the element did’nt exist when the original click handler was set. You’ll need to delegate the event to a higher element, like so:

$('#nicknames').on('click', '.chatNickname', function(){ 
   alert("hello");
});