Попробуйте:
$('#friends-panel').delegate( 'a.buddy', 'click', function() {
alert("Loaded");
// ...your code
});
... вместо $('#friends-panel a.buddy').click(function() {...
http://api.jquery.com/delegate/
Когда вы звоните .click(function...)
, вы на самом деле звоните .bind('click', function...)
.
Если он настроен на запуск после загрузки DOM, он назначает обработчик щелчка для существующих элементов.
Элементы, добавляемые динамически после загрузки DOM, не получают от этого преимущества..
Использование .delegate()
помещает обработчик щелчков на #friends-panel
и прослушивает щелчки, которые происходят рядом с ним.Когда это происходит, он проверяет, был ли он снова a.buddy
, и, если это так, запускает обработчик.
Другой вариант - просто связать click()
в вашем обратном вызове success
перед (или после) вы добавляете к #friends-panel
.
Чтобы связать обработчик щелчков при обратном вызове success
, сначала переместите функцию в переменную:
var myfunc = function() {
alert("Loaded");
// close #friends-panel
$('.subpanel').hide();
$('#friends-panel a.chat').removeClass('active');
// ...and so on
}
... затем вместо вашего текущего click
сделайте это вместо:
$('#friends-panel a.buddy').click( myfunc );
... затем в вашем success
обратном вызове сделайте это:
success: function(data) {
if (numOfUsers != data.numOfUsers) {
numOfUsers = data.numOfUsers;
var list = "<li><span>Agents</span></li>";
for (var i = 0; i < data.friendlist.length; i++) {
list += "<li><a class=\"buddy\" href=\"#\"><img alt=\"\" src=\"images/chat-thumb.gif\">"+ data.friendlist[i] +"</a></li>";
}
// new version
$(list).click( myfunc ).appendTo('#friend-list ul');
// old version
// off-topic, no need to create jQuery object-----v
// $('#friend-list ul').append($(list));
}
setTimeout('getBuddyList(userNameID)', 1000);
}
РЕДАКТИРОВАТЬ: Чтобы назначить функцию, которая требует параметра для обработчика щелчка, одним из способов является размещение вызова функции внутри функции обратного вызова.
Вместо этого:
$('#friends-panel a.buddy').click( buddyClick );
вы сделаете это:
// Set up a handler that calls your function------v
$('#friends-panel a.buddy').click( function() { buddyClick(parameters) } );
Другой метод - ваш buddyClick
возвращает функцию, которая использует переданные параметры, например:
// Calling buddyClick actually returns a function
// that can use the parameters you passed in
var buddyClick = function(parameters) {
return function() {
alert("Loaded");
// do something with the parameters
// ...and so on
};
};
// Calling buddyClick returns the function
$('#friends-panel a.buddy').click( buddyClick('some_parameter') );
Таким образом, вы можете вызвать buddyClick
, и он вернет функцию, которая принимает параметры, используемые для Hander.
Немного более запутаннымвозможно, но правильный подход.Сделайте ваш выбор.: О)