简体   繁体   中英

js onclick event doesn't work on td element

I want to create popup div(named linkdiv holding linkcontent div) on td click which is using this function:

function getLinks(lid) {
  document.getElementById('linkdiv').style.display = "block";
  document.getElementById('linkdiv').style.visibility = "visible";
  document.getElementById('linkcontent').innerHTML = "<div align=center><img src='images/spacer.gif' border=0 height=280 width=10 alt=''><br><img src='images_v2/loading.gif' border=0 alt='Loading content'></div>";
  var lurl = "viewlinksdiv.php?lid="+lid;
  if(window.XMLHttpRequest) {
    reql = new XMLHttpRequest;
  } else if(window.ActiveXObject) {
    reql = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if(reql) {
    reql.onreadystatechange = getLinkResp;
    reql.open("GET",lurl,true);
    reql.send(null);
  } else {
    alert("Your browser does not support XMLHttpRequest technology!");
    doesNotSupport = false;
  }
}

and the td is..

 echo " <tr> <td width=240 height=20 align=\\ "left\\" valign=\\ "top\\" style=\\ "cursor:hand;cursor:pointer;padding-top:".$pad. ";padding-bottom:5px\\" onclick=\\ "getLinks('".$mid. "');return:false;\\"><b class='news_date'>".$mdate."&nbsp;&nbsp;".$cname.$mpol.":</b>&nbsp; <font class='news_title'>".$msectname."</font><br> <font class='news_date'>".$moretext."</font> </td> </tr>\\n"; 

and the div I want to show is

<div id="linkdiv">
  <div id="linkdiv_body">

    <div id="tapclose" align="right" onclick="closeLink()" alt="Close">X</div>
    <div id="linkcontent" class="linkdiv_font"></div>

  </div>
</div>

this function is working with a href element like

<a class="jslink" href="javascript:getLinks('3975')">link</a>

but doesn't work on td onclick element. which is weird cause it's using the same function. Anyone have any idea why this doesn't work? Thanks.

Javascript function is not getting called due to some syntax errors, update your php code with below one. another thing is in your onclick event you have "return:false" it should be "return false"

echo "
 <tr>
  <td width=240 height=20 align='left' valign='top' style='cursor:hand;cursor:pointer;padding-top:".$pad. ";padding-bottom:5px' onclick=\"getLinks('".$mid. "');return false;\"><b class='news_date'>".$mdate."&nbsp;&nbsp;".$cname.$mpol.":</b>&nbsp;
   <font class='news_title'>".$msectname."</font><br>
   <font class='news_date'>".$moretext."</font>
  </td>
 </tr>\n";

and working example is below

 function getLinks(lid) { alert("called"); document.getElementById('linkdiv').style.display = "block"; document.getElementById('linkdiv').style.visibility = "visible"; document.getElementById('linkcontent').innerHTML = "<div align=center><img src='images/spacer.gif' border=0 height=280 width=10 alt=''><br><img src='images_v2/loading.gif' border=0 alt='Loading content'></div>"; var lurl = "viewlinksdiv.php?lid="+lid; if(window.XMLHttpRequest) { reql = new XMLHttpRequest; } else if(window.ActiveXObject) { reql = new ActiveXObject("Microsoft.XMLHTTP"); } if(reql) { reql.onreadystatechange = getLinkResp; reql.open("GET",lurl,true); reql.send(null); } else { alert("Your browser does not support XMLHttpRequest technology!"); doesNotSupport = false; } } 
 <table> <tr> <td style="cursor:hand;cursor:pointer;padding-top:10;padding-bottom:5px" onclick="getLinks('9999');return false;" width="240" valign="top" height="20" align="left"><b class="news_date">1/1/2017&nbsp;&nbsp;TestTestMPol:</b>&nbsp; <font class="news_title">Test</font><br> <font class="news_date">More</font> </td> </tr> </table> 

you can click on "TestTestMPol" and you will see a alert.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM