如何处理div上的点击事件

I have a data set of items coming from a SQL database. Those items are displayed in multiple divs like:

我有一个来自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>'
 }
 ?>

My problem is that I cannot handle click events for EACH div, so I cannot identify which item has been clicked. I’ve been searching for a solution for quite a while, but haven’t found anything. So my question is – how can I identify the clicked item?

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

EDIT I have no idea how I can dynamically assign an ID to a button

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

3 个解决方案

#1

You could use a data attributes (HTML5 assumed) to attach the Id as meta data to your divs. Your PHP (note I am adding data-id attributes):

您可以使用数据属性(假设为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 - simple click handler attachment, using jQuery .data() [docs] to get data attribute:

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

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

JSFiddle Demo

#2

How about when creating the html in the php, you echo the id inside the class.
echo '<div id="mydiv-' . $json_obj['id'] . '">';

怎么样在php中创建html时,你会回应类中的id。 echo'

So now in the html, it's going to look like
<div id="mydiv-1"> ... </div>
<div id="mydiv-2"> ... </div>
<div id="mydiv-3"> ... </div>
etc.

所以现在在html中,它看起来像

...

...... 等

And then in Javascript, you could access them the same way you access any tag.

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

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

So in order to assign listeners to each div, you could do a loop

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

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

}

Make sure to add a container for all the divs.

确保为所有div添加容器。

#3

Give each div a unique numeric class, so your jquery will be

给每个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
});

#1