2013-09-10 6 views
0

Прежде всего, я использую Codeigniter Framework. Я поместил свой jquery.js в тот же каталог, что и home.php. Мой контроллер будет загружать домашний вид. И ниже выглядит мой домашний взгляд. Как вы можете видеть, я пытаюсь открыть google.com в новом окне, когда я нажимаю td с идентификатором more_info. Но это не работает. Зачем?Jquery click не открывается в новом окне

<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

+1

Вы уже проверили консоль браузера для каких-либо ошибок? –

+1

Вы можете использовать идентификатор только один раз на странице. Измените идентификатор на класс и измените селектор на '$ (". More_info ")' – Archer

+0

У вас должен быть только 1 идентификатор, так как он находится в цикле, в котором вы будете запускать дубликаты идентификаторов. Изменяет их на классы. Вы также должны передать объект событий функции обратного вызова и вызвать preventDefault() вместо return false. – johnferrie

ответ

0

The 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; 
    }); 
}); 
+0

Не работает. Я обновил свой вопрос с изображением. Подумайте, правильно ли указано файл сценария. –

+0

@LimGuangJian: Это изображение подразумевает, что структура каталогов проекта не является фактическим маршрутом, обслуживаемым приложением. Обычно это относится к любому веб-приложению MVC. Вы не можете поместить файлы JavaScript в каталог 'Views', потому что это не то место, где они обслуживаются. Вам нужно будет поместить их в каталог, который будет использоваться как обычный контент, а не как код. – David

0
  1. Ваш сценарий у вас есть должно быть написано после завершения страницы. (вы, , должны поместить ваш скрипт после php-кода).

  2. Ваш код является неправильным.

    2.1 Петля не подлежит компиляции. Для примера выберите одну таблицу + один столбец.

    2.2 Вам также нужно обратиться к googleapi в порядке использования jquery.

    2,3 Вы должны обратиться к http://google.com, а не google.com (который, очевидно, открыть страницу с именем google.com на вашем сайте, и я persume это не то, что вы имели в виду.

удачи .

+0

Я выяснил, в чем проблема. По-видимому, при использовании CodeIgniter (я новичок) директорию jquery.js-файла следует поместить другой каталог в отличие от обычного (не Codeigniter). Я просто помещаю его в тот же каталог, что и страница, над которой я работаю, и это будет Работа. –

0

для уточнения, я положил мой код, который работает для меня.

Обратите внимание, которое сценарий тег это после того, как t конец 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> 
1

вы используете тот же идентификатор тд, так что вы должны использовать класс вместо того чтобы повторять идентификатор

<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; ?> 
Смежные вопросы