如果所有div都具有相同的類，如何從jquery點擊事件的多個div中選擇一個div？

我有一個類.display_noti一個div和裏面我已經從數據庫append另一個div與.palnotific類由jquery.I已讀取的數據，我轉換該讀入數據到json_encode .I使用的JSON格式數據並提出了一些信息，其分別是和append。如果所有div都具有相同的類，如何從jquery點擊事件的多個div中選擇一個div？

其追加該專區內的數據與 .display_noti類

我的第一個jQuery代碼看起來像： -

$.getJSON("notification.php",function(data){ 
    // you can do checking here 
    if (data.result && data.result.length > 0) { 
     $(".display_noti").empty(); // Clear out the div 
     $.each(data.result,function(){ 
     $(".display_noti").append("<div class='palnotific'>You got a pal requet from <strong>"+this['from_user']+"</strong><br><span class='date'>"+this['notification_date']+"<form method='post'><input type='text' class='palid' value='"+this['pals_id']+"'></form></div>"); 
     }); 
     done(); 
    } 
    else { 
      $(".display_noti").append("<div class='palnotific' style='background-color:white;'>You have no notification to view.</div>"); 
    }

在上面，我先拿到的JSON格式的數據，我做了一些驗證，然後在最後我附上那第二個div與.palnotific類.palnotific裏面的第一個div類.display_noti。我有一個表格裏面附加div，我用它來從輸入值使用。

我們知道.palnotific是一個附加div.I想用一些onclick事件函數就可以了的話，我用下面的代碼： -

$('body').on('click','.palnotific',function(){ 
    var x = $(this).closest('.display_noti').find('.palid'); 
    var pid=x.val(); 
    $.ajax({ 
    url:'notifipro.php', 
    type:'post', 
    data:"palid="+pid, 
    success: function(data){ 
     if(data==1) 
     { 
     $(window).load('oldpage.php'); 
     } 
     if(data==2) 
     { 
      $(window).load('newpage.php'); 
     } 

    } 
    }); 

});

上面的代碼需要從形式是內部的輸入值那.palnotific div是從jquery前面追加的。正如你所知道的那些附加的div通過json_encode從數據庫攜帶數據。它將獲得儘可能多的數據庫中的值，這意味着如果數據庫中有2個數據，json_encode也會有2個數據，那些追加div類從json_encode採取數據將追加2時間div與類palnotific。現在我的問題是，如果我有兩個d iv與類palnotifi源於該追加我的點擊功能工作第一個div只有當我點擊第二個div onclick函數不起作用。無論我有2個或更多，然後兩個div如果我點擊任何一個div第一個div點擊功能採取行動。我可以如何讓onclick函數只對那些被點擊過的div有效？

來源

2015-11-03 SOuřaan Gřg

如果您可以將代碼粘貼到示例jsfiddle中，該示例可能會幫助某些人獲得解決方案。 –

@BryanRay可以從jquery'onclick'函數中選擇具有相同類的div組中的一個div嗎？我想選擇並採取行動那些只能被點擊的div，所以我們怎麼才能從jquery中做到這一點？ –

如果你只是顯示輸出HTML的樣子，這將更容易理解。 – BadHorsie

讓jquery對動態創建的元素作出反應的最簡單方法是將事件附加到該元素本身。另一種方法是在帶有子過濾器的容器div上使用on，但由於您已經創建了html，因此可以將其封裝在$('yourhtml')中，並將點擊直接附加到創建的元素。在與appendTo，而不是追加的組合，也可以鏈中的追加和點擊：

//mock data: 
var data={result: [ 
      {from_user: 'A', notification_date: new Date(), pals_id: 1}, 
      {from_user: 'B', notification_date: new Date(), pals_id: 2}, 
      {from_user: 'C', notification_date: new Date(), pals_id: 3} 
]}; 


$.each(data.result,function(){ 
     var id = this.pals_id; 
     $("<div class='palnotific'>You got a pal request from <strong>"+this['from_user']+"</strong><br><span class='date'>"+this['notification_date']+"<form method='post'><input type='text' class='palid' value='"+ id +"'></form></div>") 
     .appendTo(".display_noti") 
     .click(function(){ 
      //attach pre existing function or assign your logic here 
      alert('You clicked ' + id); 
     }) 
});

Example fiddle

在這個例子中，ID也保存前手和附加點擊裏面重用。如果您需要使用原始值，則可以使用$(this).find('.palid').val()（如this fiddle中所做的那樣）

來源

2015-11-03 16:43:36

它做了我的工作兄弟謝謝！因此，我們使用'appendTo'來爲每個div添加類'.palnotific'的點擊功能。 –

是的，因爲appendto仍然返回原來的jquery對象。你也可以有一個包含創建的div的變量，並使用它來附加（to）並附加click，但這樣它們可以被鏈接。 –

返回jquery對象的原始意思？ –

您可以在on()函數中使用更具體的CSS3 Selector。我不完全確定這會解決您的整體問題，但它可能會使您朝着正確的方向前進。

$(".display_noti").on("click", ".palnotific:first", function(event) { 
    console.log("You Clicked: ", event.target.id); 
});

這裏是一個example JSFiddle;

來源

2015-11-03 15:42:11

從您粘貼代碼，這個問題應該是這一行：

var pid=x.val();

，你可以在jQuery的文檔找到（http://api.jquery.com/val/）

.VAL（）獲取的當前值匹配元素集合中的第一個元素或設置每個匹配元素的值。

來源

2015-11-03 16:05:21 kdepp

如果所有div都具有相同的類，如何從jquery點擊事件的多個div中選擇一個div？

回答

相關問題