如何处理div上的点击事件

Question

我有一个来自SQL数据库的项目数据集。 这些项目显示在多个div中，如：

 <?php
 $url = 'DataBase';

 $json_response = file_get_contents ( $url );

 $json_arr = json_decode ( $json_response, true );

 for($i = count ( $json_arr )-1; $i > 0;  $i--) {
 $json_obj = $json_arr [$i];


 echo '<div id="MyDIV">';
 echo $json_obj ['id'] ;
 echo $json_obj ['title'];  
 echo $json_obj ['article'];  
 echo '<button id="read_more_btn">Read more</button>';
 echo '</div>'
 }
 ?>

我的问题是我无法处理EACH div的点击事件，所以我无法识别哪个项目被点击了。 我一直在寻找解决方案很长一段时间，但没有找到任何东西。 所以我的问题是 - 如何识别被点击的项目？

编辑我不知道如何动态地为按钮分配ID

Answer 1

您可以使用data属性（假设为HTML5）将Id作为元数据附加到您的div 。 你的PHP（注意我正在添加data-id属性）：

<?php
 $url = 'DataBase';
 $json_response = file_get_contents ( $url );
 $json_arr = json_decode ( $json_response, true );
 for($i = count ( $json_arr )-1; $i > 0;  $i--) {
   $json_obj = $json_arr [$i];
   echo '<div data-id="' . $json_obj['id'] . '">';
   echo $json_obj ['id'] ;
   echo $json_obj ['title'];  
   echo $json_obj ['article'];  
   echo '<button id="read_more_btn">Read more</button>';
   echo '</div>'
 }
 ?>

JS - 简单的点击处理程序附件，使用jQuery .data() [docs]获取数据属性：

$('div').click(function(e) {
    var id = $(this).data("id");
    alert(id);
});

JSFiddle演示

Answer 2

在php中创建html时，如何在类中回显id。
echo '<div id="mydiv-' . $json_obj['id'] . '">';

所以现在在html中，它看起来像
<div id="mydiv-1"> ... </div>
<div id="mydiv-2"> ... </div>
<div id="mydiv-3"> ... </div>
等等

然后在Javascript中，您可以像访问任何标记一样访问它们。

$('#mydiv-1').click(function(e){
    console.log('a div was clicked');
    console.log($(this))
});

因此，为了将侦听器分配给每个div ，您可以进行循环

for(var i = 1;$('#mydiv-container').children().length >= i,i++)
{
     $('#mydiv-' + i).click(function(){ 

}

确保为所有div添加容器。

Answer 3

给每个div一个唯一的数字类，所以你的jquery将是

$('div').click(function() {
    var item_id = $(this).attr("class");
    //do stuff here
});

要么

$('div').click(function() {
    var item_id = this.className;
    //do stuff here
});