javascript - <div> onClick not working?

Iam printing some content using php code inside html but, when i tried to click on that div its not calling the function in onClick ??

Here is my php code

 echo '<div class="col-sm-12 col-xs-12 " ><div class="row ">';
echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';
echo  $myarray['Job']['title']."</h3></div></div></div>";

this is resulting html code in "view source" of browser

<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
  <div class="col-sm-10 " onClick="openUrlInNewTab("www.example");" >
    <h3>Can you Code? </h3>
  </div>
 </div>
</div>

and here is my function in html page

    function openUrlInNewTab(url) {
// div click is not reaching  here
     alert(url); 
     window.open(url, "_blank");
}

Iam printing some content using php code inside html but, when i tried to click on that div its not calling the function in onClick ??

Here is my php code

 echo '<div class="col-sm-12 col-xs-12 " ><div class="row ">';
echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';
echo  $myarray['Job']['title']."</h3></div></div></div>";

this is resulting html code in "view source" of browser

<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
  <div class="col-sm-10 " onClick="openUrlInNewTab("www.example.com");" >
    <h3>Can you Code? </h3>
  </div>
 </div>
</div>

and here is my function in html page

    function openUrlInNewTab(url) {
// div click is not reaching  here
     alert(url); 
     window.open(url, "_blank");
}

Share Improve this question asked Jul 16, 2014 at 11:15 user3755198 1151 gold badge3 silver badges8 bronze badges

but why? is there any other way? – user3755198 Commented Jul 16, 2014 at 11:17
5 Replace "www.example.com" with 'www.example.com' (single quotes) – Phantom Commented Jul 16, 2014 at 11:18
I came here because the question was the first search result for "onclick not working", but found the solution in this question. – bluenote10 Commented May 31, 2021 at 8:22

Add a comment |

4 Answers 4

Sorted by: Reset to default 9

You should use single quotes.

Instead of

<div class="col-sm-10 " onClick="openUrlInNewTab("www.example.com");" >

you should have

<div class="col-sm-10 " onClick="openUrlInNewTab('www.example.com');" >

If you put double quotes inside double quotes it simple won't work.

So in PHP you should change:

 echo '<div class="col-sm-10" onClick="openUrlInNewTab("'.$myarray['Job']['link'].'");"><h3>';

into

echo '<div class="col-sm-10" onclick="openUrlInNewTab(\''.$myarray['Job']['link'].'\');"><h3>';

EDIT

One extra thing. If you want this url open in your browser, you should rather add http:// before www.example.com

Sample working HTML code:

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div class="col-sm-12 col-xs-12 ">
 <div class="row " >
  <div class="col-sm-10 " onclick="openUrlInNewTab('http://www.example.com');" >
    <h3>Can you Code? </h3>
  </div>
 </div>
</div>
          <script>
    function openUrlInNewTab(url) {
// div click is not reaching  here
     alert(url); 
     window.open(url, "_blank");
}
</script>
</body>
</html>

onClick="openUrlInNewTab("www.example.com");"

should be

onClick="openUrlInNewTab('http://www.example.com');"

Use single quotes inside the function for the url.

onClick="openUrlInNewTab("www.example.com");"

should be

onclick="openUrlInNewTab('http://www.example.com');"

the rest is fine

You know how to use jQuery, right?

$(document).ready(function()
{
    $('div').on('click', function()
    {
        alert('clicked!');
    });
});

You can put onclick on div, but it most likely won't work like you're currently doing it because how javascript and php works. (I don't think those noclicks ever get bound)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - <div> onClick not working? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)