Question

首先，我使用的是Codeigniter框架。我把我的jquery.js放在home.php所在的目录中。我的控制器将加载主视图。以下是我的家庭观点。正如您所看到的，当我点击ID为more_info的td时，我试图在新窗口中打开google.com。但它不起作用。为什么呢？

<script src="jquery.js"></script>
<script type="text/javascript">
$("#more_info").click(function(){
  window.open("google.com");
  return false;
});
</script>

<?php foreach ($records as $row) : ?>

    <table border="1">

        <tr>
            <td id="more_info">More Info</td>
        </tr>
    </table>

<?php endforeach; ?>

enter image description here

Answer 1

你使用相同的td id，所以你应该使用该类而不是重复id

<script src="jquery.js"></script>
<script type="text/javascript">
$(".more_info").click(function(){
  window.open("google.com");
  return false;
});
</script>

<?php foreach ($records as $row) : ?>

    <table border="1">

        <tr>
            <td class="more_info">More Info</td>
        </tr>
    </table>

<?php endforeach; ?>

Answer 2

JavaScript一加载就会执行，这是在该元素加载之前执行的。因此，当JavaScript代码运行时，它试图将click事件处理程序附加到尚不存在的元素。

您可以通过将JavaScript代码与文档的ready事件包装在一起来等待加载元素：

$(document).ready(function () {
    $("#more_info").click(function(){
        window.open("google.com");
        return false;
    });
});

或者，更短的版本：

$(function () {
    $("#more_info").click(function(){
        window.open("google.com");
        return false;
    });
});

Answer 3

您编写的脚本应该在页面完成后。（您应该把你的脚本放在php代码之后。）
您的代码错误。

2.1循环不可编译。例如，选择一个表+一列。

2.2您还需要使用jquery按顺序引用googleapi。

2.3您应该参考http://google.com，而不是google.com（显然在您的网站上打开了一个名为google.com的网页，我会点这不是你的意思。

Answer 4

为了澄清，我提出了适用于我的代码。

注意 脚本标记 是在html结尾之后（在所有元素被创建之后）。

祝你好运!!!

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>  
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td id="more_info">More Info</td>
        </tr>
    </table>
<script type="text/javascript">
$("#more_info").click(function(){
  window.open("http://google.com");
  return false;
});
</script>
</body>
</html>

Jquery单击不会打开新窗口

4 个答案: