我使用JQuery和Node.js運行Drupal 7。我希望事件發生在div onclick事件中。但是,它不會在類上工作,但如果我使用父分區ID,它將起作用。爲什麼onclick函數不能在類上工作?
是我遇到的麻煩該生產線是:
$(document).ready(function() {
$('.chatNickname').click(function(){
alert("hello");
});
的代碼片段工作在jsfiddle..not確定是什麼問題。 整個代碼如下:
<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 = /(\[email protected][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>
感謝您的幫助!那是答案。 我想我不明白Javascript處理程序是如何工作的。元素必須在調用處理程序之前創建,因此處理程序綁定到現有元素? JavaScript是不是動態偵聽,看看是否創建新的div? 另外,.on('click')和.click之間有什麼區別?根據[鏈接](http://api.jquery.com/on/#additional-notes),.click是一個快捷功能 –
不,它只附加處理程序到已存在的元素。將處理程序附加到未來的元素委派是必要的。使用on()和click事件的常規方式與click()相同,但沒有一個會委託事件,因此您需要live(),delegate()或最好在()上寫在我的回答中,它在非動態元素上監聽冒泡的事件,當目標匹配時執行函數等。 – adeneo
感謝您的幫助:) –