how to get div elements using click function jquery ,php

Question

I don't know why click function not working,

jquery code

 $("[id^='msgr_']").click(function(){
     var id= $(this).attr('id').split("_")[1];
     $("#chatbox-data-"+id ).fadeIn();
 });

Html code

 <div id="chatbox-data-<?php echo $d['qid'];?>" class="chatbox">

   <div  style="background-color:#000; color:#fff;padding:10px;">

  title:<a><?php echo $d['title'];?></a><br>
   qid:<?php echo $d ['qid'];?>


     <span class="close">&times;</span>

    </div><br>

link:

 <a class="clinks msgr" style="text-decoration: none; font-weight:bold;" 
  id="msgr_<?php echo $d['qid'];?>"href="javascript:void(0)">message</a>

when i click message link chatbox needs to be open but not working don't
no what is the problem save me

Answer 1

first this is a part of your code:

   <div id="chatbox-data-<?php echo $d['qid'];?>" class="chatbox">

  <div  style="background-color:#000; color:#fff;padding:10px;">

   title:<a><?php echo $d['title'];?></a><br>
  qid:<?php echo $d ['qid'];?>


 <span class="close">&times;</span>

</div><br>

you open two div and only close one , so replace it to :

  <div id="chatbox-data-<?php echo $d['qid'];?>" class="chatbox">

   <div  style="background-color:#000; color:#fff;padding:10px;">

   title:<a><?php echo $d['title'];?></a><br>
    qid:<?php echo $d ['qid'];?>


    <span class="close">&times;</span>

    </div></div><br>

then at js code :

   $("[id^='msgr_']").click(function(){
    var id= $(this).attr('id').split("_")[1];
   $("#chatbox-data-"+id ).fadeIn();
   });

you use fadeIn to element already displayed so,no change will happen. either to make that element style= "display:none" to accept fadeIn onclick that anchor or to change it to fadeOut to see effect :

     $("[id^='msgr_']").click(function(){
      var id= $(this).attr('id').split("_")[1];
       $("#chatbox-data-"+id ).fadeOut();
      });

or

  $("[id^='msgr_']").click(function(){
      var id= $(this).attr('id').split("_")[1];
       $("#chatbox-data-"+id ).fadeOut(1000).fadeIn(1000);
       });