Jquery单击不'；不要打开新窗口_Jquery_Codeigniter

Jquery单击不'；不要打开新窗口

jquery codeigniter

Jquery单击不'；不要打开新窗口,jquery,codeigniter,Jquery,Codeigniter,首先，我使用的是Codeigniter框架。我已经将jquery.js与home.php放在同一个目录中。我的控制器将加载主视图。下面是我的主视图。正如你所看到的，当我点击id为more_info的td时，我正试图在一个新窗口中打开google.com。但它不起作用。为什么? <script src="jquery.js"></script> <script type="text/javascript"> $("#more_info").click(funct

首先，我使用的是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; ?>


$（“#更多信息”）。单击（函数（）{
window.open（“google.com”）；
返回false；
});
更多信息

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

您可以使用文档的就绪事件包装JavaScript代码，等待加载元素：

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

或者，更简短的版本：

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

您编写的脚本应该在页面完成后进行。（你应该将脚本放在php代码之后）

你的代码错了

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

2.2为了使用jquery，您还需要参考googleapi

2.3你应该参考google.com，而不是google.com（google.com显然在你的网站上打开了一个名为google.com的页面，我想这不是你的意思

祝你好运。

为了澄清，我把我的代码放在这里，它对我有用

请注意脚本标记位于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>


更多信息
$（“#更多信息”）。单击（函数（）{
窗口打开（“http://google.com");
返回false；
});

您使用的是相同的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; ?>


$（“.more_info”）。单击（函数（）{
window.open（“google.com”）；
返回false；
});
更多信息

您是否已检查浏览器控制台是否有任何错误？一页中只能使用一次id。请将id更改为类，并将选择器更改为

$（“.more\u info”）

您应该只有1个id，因为这是一个循环，您将得到重复的id。将这些id更改为类。您还应该将events对象传递给回调函数并调用preventDefault（）与返回false不同。@Archer和johnferrie，我稍后将在产品id中附加更多信息。在您这样做之前，它不会起作用。不同的浏览器在遇到具有相同id的多个元素时表现不同，因此您不应该从一开始就这样做，否则会带来问题：）它不起作用。我用图片更新了我的问题。不知道脚本文件的位置是否正确。@LimGuangJian:该图像对我来说意味着项目的目录结构不是应用程序提供的实际路由。任何MVC web应用程序都是如此。您不能将JavaScript文件放在

视图

目录中，因为它们不是从那里提供服务的。你必须把它们放在一个作为常规内容而不是代码的目录中。我发现了问题所在。显然，当使用CodeIgniter（我是新的）时，jquery.js文件的目录应该放在另一个目录中，这与通常的方式不同（不是CodeIgniter），我只是将它放在与我正在处理的页面相同的目录中，它会工作。