JQuery работает в консоли, но не в исходном коде

Я попытался использовать следующий код для добавления href в тег a внутри td. он работает нормально, пока я делаю в консоли. Но когда я пытаюсь сделать то же самое в своем коде, он не работает. Может ли кто-нибудь сказать мне причину?

<script>
    $("table tbody tr td a").attr('href','http://www.google.com');
 </script>
<table>
    <tr>
        <td><a >Hai</a></td>
    </tr>
</table>

Ответы

Ответ 1

Используйте document.Ready()

$(document).ready(function() {
    $("table tbody tr td a").attr('href','http://www.google.com');
});

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

Больше информации: http://api.jquery.com/ready/

Ответ 2

Элемент не существует, когда выполняется jquery. Вам нужно поставить свои обработчики в готовые функции.

<script type="text/javascript">
$(function() {
    $("table tbody tr td a").attr('href','http://www.google.com');
});
</script>

$(function() {}); является сокращением для $(document).ready(function() {});

Ответ 3

JS запускается до создания html.

<table>
    <tr>
        <td><a >Hai</a></td>
    </tr>
</table>
<script>
    $(function() {
        $("table tbody tr td a").attr('href','http://www.google.com');
    });
 </script>

Ответ 4

поставьте его в готовом разделе:

<script type="text/javascript">
$(document).ready(function() {
 $("table tbody tr td a").attr('href','http://www.google.com');
});
</script>

Ответ 5

Ваш код выполняется до того, как DOM будет готов и элемент действительно существует, попробуйте его следующим образом:

 <script>
    $(document).ready(function(){
      $("table tbody tr td a").attr('href','http://www.google.com');
    });
 </script>

Причина, по которой он работает на консоли, состоит в том, что элемент <a> уже существует при выполнении кода...

JSBin Demo

Ответ 6

Порядок файлов jQuery на главной странице макета также может повлиять на то, почему он не работает в реальном коде, а работает в консоли браузера. Ссылки на файлы jQuery должны указываться в следующем порядке на главной странице:

<script type="text/javascript" src="/Scripts/jquery-3.1.1.min.js"></script>      
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>

Для тех, кто приезжает сюда в поисках решения того, что написано в заголовке, не вдаваясь в подробности этого конкретного вопроса, надеюсь, он кому-нибудь поможет.