jQuery 在来自 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>

messagelist.php

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

所以在上面我们可以看到，在 message.php 页面中，数据从 messagelist.php 页面加载到 getmsglist div。在 messagelist.php 上，属性 this-chat 包含用户 ID。我希望通过 AJAX 获取此用户 ID。目前，我尝试为所有行返回相同的用户 ID。我需要解决这个问题。

我试过的...！

$(".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") 在这里不起作用，它 returns 所有行的用户 ID 相同。我尝试了“$(this)”，但它返回了 undefined，因为它试图获取不存在的 div“.msgcontent”的属性。我怎样才能为所有行获取不同的属性值？

Answer 1

通过使用 .on().

委派点击处理程序，您应该能够 select 一个 .messagebox 而不是请求所有 $('.messagebox')

$('.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');

如果您需要整数而不是字符串，数据属性将自动转换。但首先尝试在控制台日志中实际获取您的对象。

jQuery 在来自 AJAX 的循环数据中获取属性值

jQuery getting value of attribute inside while loop data coming from AJAX

javascript

php

ajax

jquery

attributes