Функция не работает после ajax [дубликата]

Вам необходимо использовать делегат:

$(document).on('mouseover', '.chatr', function() {
    $(this).find('.action').removeClass('dn');
});

Однако, если у вас есть контейнер для всех ваших .chatr элементов, используйте идентификатор этого контейнера вместо document.

Это связано с тем, что события загружаются на странице. Конкретный .chatr элемент добавляется после загрузки, поэтому вы должны использовать то, что называется делегированным обработчиком событий. Попробуй это:

$(document).on('mouseover', '.chatr', function() {
    $('#' + this.id + " .action").removeClass('dn');
});

Обратите внимание, что вы должны заменить document ближайшим статическим родительским элементом, к которому добавляется содержимое.

Обработчики событий jQuery привязаны только к элементам, которые существуют при выполнении кода. Элементы, которые добавляются после выполнения этого кода, автоматически не привязывают обработчик события, даже если они соответствуют критериям для селектора. Решение - это делегирование событий:

$(document).on('click', '.chatr', function(e) {
    $('#'+this.id+" .action").removeClass('dn');
});

В идеале вы вызывали бы .on() (и привязывали обработчик события) к ближайшему элементу статического предка (то есть к тому, который всегда будет существовать и всегда будет содержать элементы, которые вы хотите инициировать для события), а не document, Не видя HTML, невозможно узнать, какой элемент должен быть.

Это не будет работать с динамически создаваемыми элементами, потому что обработчик обработчика события удаляется\не устанавливается для вновь добавленных элементов после начальной загрузки страницы.

Что вы можете сделать, так это добавить прослушиватель событий в родительский элемент div.chatr и проверить через $ (event.target).hasclass('chatr'), чтобы определить, должно ли событие срабатывать