如何處理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
});