jQuery получение значения атрибута внутри, в то время как l oop данные поступают из AJAX

Question

Давайте сначала настроим структуру.

message. php

<div class="msgcontent content" id="bodycontent">
  <div class="getmsglist"></div>
</div>
<script>    
  setInterval(function(){
    $('.getmsglist').load('processes/messagelist.php');
  }, 500);
</script>

список сообщений. php

<?php while($mat = $stmt->fetch()){ ?>
  <div class="messagebox" this-chat="<?php echo $mat['mem_id']; ?>">
      // Other Stuffs
  </div>
<?php } ?>

Итак, выше мы видим, что на странице message.php данные загружаются на getmsglist div со страницы messagelist.php. На messagelist.php атрибут this-chat содержит идентификатор пользователя. Я хочу, чтобы этот идентификатор пользователя выбирался через AJAX. В настоящее время то, что я пробовал, возвращало один и тот же идентификатор пользователя для всех строк. Мне нужно это исправить.

То, что я пытался ...!

$(".msgcontent").click(function() {
  var memid = $(".messagebox").attr("this-chat"); // doesn't work (fetches same id for all rows)
  //var memid = $(this).children(".messagebox").attr("this-chat"); // this returned undefined as well
  var dataString = {
    memid: memid
  };
  console.log(dataString);
});

$(".messagebox") здесь не работает и возвращает одинаковый идентификатор пользователя для всех строк. Вместо этого я попробовал «$ (this)», но он вернул undefined, поскольку он пытается извлечь атрибут div «.msgcontent», который не существует. Как я могу получить значение этого атрибута, различное для всех строк?

Answer 1

Вместо того, чтобы запрашивать все $('.messagebox'), вы должны иметь возможность выбрать один .messagebox, делегировав обработчик кликов с .on () .

$('.msgcontent').on('click', '.messagebox', function() {
    var memid = $(this).attr('this-chat');
    var dataString = { memid: memid };

    console.log(dataString);
});

Таким образом, ваш обработчик кликов привязан к контейнеру .msgcontent, но делегирован .messagebox. Таким образом, обработчик может быть привязан до того, как будет загружен фактический контент.

---

Теперь я не совсем уверен насчет пользовательского атрибута this-chat. Логичнее использовать data-chat.

var memid = $(this).data('chat');

Атрибуты данных будут преобразованы автоматически, если вам нужно целое число вместо строки. Но сначала попробуйте получить объект в журнале консоли.