Javascript-форум - Сложные селекторы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Сложные селекторы (https://javascript.ru/forum/jquery/6568-slozhnye-selektory.html)

Цитата:

Сообщение от rozmath (Сообщение 251622)

Привет всем!
Есть система переписки на php + mySql + jQuery
Проблема вот в чем:
Нужно реализовать клик мышки на комментарии.
Комментарии находятся в такой иерархии:

<div class="form_field_center" id="message_list">
	<div id="newComment"></div>
	<div id="comment_list">
          //Сообщение читаются из базы и вставляются сюда
        </div>
</div>

Сообщения читаются из базы в файле .рhp и возвращаются благодаря функции на AJAX

foreach($comments as $c)
	echo '<div>'.$c->markup_read().'</div>';

$('#comment_list').append(html);

В свою очередь, существует класс сообщений с методом markup_read, что возвращает HTML разметку сообщение с соответствующими классами.

public function markup_read(){
		$this->data['date_time'] = strtotime($this->data['date_time']);
		
		return '<div class="comment" id='.$this->data['id'].'>
						<div class="avatar"></div>
						<div class="delete" id='.$this->data['id'].'></div>
						<div class="edit" 	id='.$this->data['id'].'></div>
						<div class="author">'.$this->data['author'].' ᐅ '.$this->data['recipient'].'</div>
						<div class="date" title="Added at '.date('H:i \o\n d M Y',$this->data['date_time']).'">'.date('d/m/Y H:i:s',$this->data['date_time']).'</div>
						<p>'.$this->data['message'].'</p>
						<div>'.$this->data['id'].'</div>
						</div>';
	}

Нужно реализовать обработку клиак по разметке сообщение - тоесть по классу comment, delete, edit ...
Как добраться до класса comment? Помогите, пожалуйста. Спасибо.

Если правильно понял, то можно так:

$('#comment_list')
   .on('click', '.comment', fucntion(){})
   .on('click', '.delete', fucntion(){})
   .on('click', '.edit', fucntion(){});

Сначала так и было, пока новидомлення генерировались на странице. Но теперь они генерируются в файле script.js и отправляются после $('#comment_list').append (html)
Если открыть источник страницы, сообщений div нет.

Код:

<div class="form_field_center" id="message_list">

        <div id="newComment"></div>

        <div id="comment_list"></div>

</div>

Цитата:

Сообщение от rozmath (Сообщение 251634)

Код:

<div class="form_field_center" id="message_list">

        <div id="newComment"></div>

        <div id="comment_list"></div>

</div>

Можно попробовать тогда так:

$('#comment_list')
   .append(html)
   .find('.comment').on('click', fucntion(){}).end()
   .find('.delete').on('click', fucntion(){}).end()
   .find('.edit').on('click', fucntion(){});

либо так:

var commentList = function(){return $('#comment_list');};
commentList
   .append(html)
   .find('.comment').on('click', fucntion(){}).end()
   .find('.delete').on('click', fucntion(){}).end()
   .find('.edit').on('click', fucntion(){});

Соотв. код этот ставить после загрузки Вашего "script.js".

На самом деле способов множество может быть ...

Опять не работает. Перепробовал все ваши варианты а также вводил свои правки - ни один не заработал.
Возможно нужно грузить сообщения не в файле script.js?

Цитата:

Сообщение от rozmath (Сообщение 251651)

Хм ... Ну, нужно просто тогда смотреть в консоли - что приходит вообще ... Ну и пробовать результаты ... И, в зависимости от этого двигаться дальше ...

Как-то так:

console.group('Test #comment_list');
   console.log($('#comment_list'));
   console.log(html);
$('#comment_list').append(html);
   console.log($('#comment_list'));
   console.log($('#comment_list').find('.comment'));
   console.log($('#comment_list').find('.delete'));
   console.log($('#comment_list').find('.edit'));
console.groupEnd();

Ну и соотв. заменяя $('#comment_list') на те варианты, которые приводил выше.

Если использовать строку при нажатии на comment_list

var htmlStr = $('#comment_list').html();

получим всю историю переписки строкой.
Но как получить ID сообщения на который наведен курсор и щелчке на нем?

Цитата:

Сообщение от rozmath (Сообщение 251657)

Если использовать строку при нажатии на comment_list

var htmlStr = $('#comment_list').html();

получим всю историю переписки строкой.
Но как получить ID сообщения на который наведен курсор и щелчке на нем?

Легко:

var htmlStr  = $('#comment_list').html();
var commentList = $(htmlStr);
commentList
   .find('.comment').on('click', fucntion(){var t = $(this); var id = t.prop('id');}).end()
   .find('.delete').on('click', fucntion(){var t = $(this); var id = t.prop('id');}).end()
   .find('.edit').on('click', fucntion(){var t = $(this); var id = t.prop('id');});

var commentList = $(htmlStr);

при клике на comment_list возвращает массив типа [object Object]

Вот как выглядят два сообщения при проверке элементов:

Вот html строка етих сообщений:

Однако при просмотре источника страницы наблюдаю следующее:

Консоль выдала:
</div> has no method 'find'