<div> onClick 不起作用？答案

【问题标题】：<div> onClick not working?<div> onClick 不起作用？
【发布时间】：2014-09-06 21:32:03
【问题描述】：

我正在使用 html 中的 php 代码打印一些内容，但是，当我尝试单击该 div 时，它没有调用 onClick 中的函数？？

这是我的php代码

 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>";

这是在浏览器的“查看源代码”中生成的 html 代码

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

这是我在html页面中的功能

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

【问题讨论】：

但是为什么呢？还有其他方法吗？
将"www.example.com" 替换为'www.example.com'（单引号）
我来到这里是因为问题是“onclick not working”的第一个搜索结果，但在this question找到了解决方案。

标签： javascript php html onclick

【解决方案1】：

你应该使用单引号。

代替

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

你应该有

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

如果你把双引号放在双引号里面，那么简单就行不通了。

所以在 PHP 中你应该改变：

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

进入

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

编辑

一件额外的事情。如果你想在浏览器中打开这个网址，你应该在www.example.com之前添加http://

工作 HTML 代码示例：

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

【讨论】：

@user3755198 我添加了完整的示例 HTML 代码。只需将其保存为 html 文件并单击此文件即可在浏览器中打开

【解决方案2】：

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

应该是

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

在函数中为 url 使用单引号。

【讨论】：

【解决方案3】：

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

应该是

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

其他都很好

【讨论】：

【解决方案4】：

你知道如何使用jQuery，对吧？

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

您可以将 onclick 放在 div 上，但它很可能不会像您目前正在做的那样工作，因为 javascript 和 php 是如何工作的。（我认为那些 noclicks 永远不会被绑定）

【讨论】：

jQuery 很棒；但是，它并不总是最好的解决方案。下载库需要开销，有时额外的好处不值得额外的网络数据成本（尤其是针对移动设备时）。
为此不值得。我喜欢将它用于 ajax 或一些不错的 UI 功能。
@Jim 几乎每次提到 jQuery 时，这种开销的谈话是怎么回事？即使您在移动设备上，它也没有那么不好。您可以下载该库，这样也不必从 CDN 获取它。
@Piwwoli：我的软件开发方法是“尊重用户”。他们可能会为他们在移动设备上的数据使用付费；为什么强迫他们下载 jQuery 库只是为了我可以添加一个 onClick 事件？但是，这只是我的风格。
@Jim 猜猜这也取决于设置。我正在为设施和设施人员制作软件，因此数据成本对他们使用公司设备和所有设备而言并不重要。老实说，我觉得你的方法有点有趣，因为我的方法可能是通过牺牲一些（如果有的话）用户体验来让我的工作更轻松。除了客户永远不会知道，如果他们知道，您几乎可以声称 jQuery 是 Web 开发的行业标准库。