如果所有div具有相同的类，如何在jquery click事件中从多个div中选择一个div？

Question

I have a div with a class .display_noti and inside it I have append another div with class .palnotific by jquery.I have fetched data from database and i converted that fetched data into json_encode .I used that json format data and made some information which were append on that div with class .palnotific .

my first jquery code which append data inside that div with class .display_noti looks like :-

  $.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>");
    } 

Above I first get the json format data and I did some validation and then at last I append that second div with class .palnotific inside that first div with a class .display_noti .I have a form inside that append div which I use to take value from a input for use.

As we know .palnotific is an appended div.I wanted to use some Onclick event function on it so, I used below code :-

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

  } 
  });

});

Above code takes the input value from that form which was inside that .palnotific div which was appended from jquery at previous.As you know those appended div carry data from database via json_encode .It will take value as much as available in database which mean if there's 2 data in database json_encode will also have 2 data and those append div class which takes data from json_encode will append 2 time that div with a class palnotific .Now my problem is that if i have two div with class palnotifi origin from that append my click function work for first div only and when i click on second div onclick function doesn't work.No matter I have 2 or more then two div if I click any one div first div click function takes action.How can I make work onclick function to those div only which have been clicked?

Answer 1

The easiest way to have jquery react on an element that is dynamically created, is to attach the event to that element itself. Another way would be using on on a the container div with a subfilter, but since you are already creating the html, you can encapsulate it in $('yourhtml') and attach the click directly to that created element. In combination with appendTo instead of append, you can also chain the append and click:

//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

In this example, the id was also stored before hand and reused inside the attached click. If you need to use the raw value, you can use $(this).find('.palid').val() (as done in this fiddle )

Answer 2

From the code you paste, the problem should be this line:

var pid=x.val(); 

as you can find in jQuery docs ( http://api.jquery.com/val/ )

.val() Get the current value of the first element in the set of matched elements or set the value of every matched element.

Answer 3

You can use a more specific CSS3 Selector in the on() function. I'm not entirely sure this is going to solve your overall problem, but it might lead you in the right direction.

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

Here is an example JSFiddle ;