jQuery在控制台中工作但不是在原始代码中工作

时间:2013-07-15 17:30:45

标签: jquery

我尝试使用以下代码将href添加到td中的a标记。我在控制台做的很好。但是当我在我的代码中尝试相同时它不起作用。谁能告诉我原因?

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

7 个答案:

答案 0 :(得分:11)

使用document.Ready()

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

在尝试操作DOM之前,您需要确保已加载文档。

更多信息:http://api.jquery.com/ready/

答案 1 :(得分:7)

当你的jquery正在执行时,元素不存在。您需要将处理程序放在准备好的函数中。

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

$(function() {});$(document).ready(function() {});

的简写

答案 2 :(得分:5)

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>

答案 3 :(得分:4)

把它放在准备好的部分:

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

答案 4 :(得分:4)

您的代码在DOM准备好并且元素实际存在之前执行,请尝试这样:

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

它在控制台上运行的原因是因为执行代码时<a>元素已存在...

JSBin Demo

答案 5 :(得分:0)

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

对于那些来这里寻求解决标题问题而又不涉及特定问题细节的人们,希望它能对某人有所帮助。

答案 6 :(得分:0)

我遇到了同样的问题,但上面的答案都没有解决。我通过检查点击事件处理程序的存在解决了它,并设置了一个我在弹出后清除的间隔

  <script type="text/javascript">
        var interval = setInterval(function() {
            if ( $(".content_btn").length) {
                $(".content_btn").click(function (){
                    var content = $(this).parent('div').children(".hidden_content").html();
                    var element = document.createElement('div');
                    element.innerHTML = `${content}`;
                    swal({
                        content: element,

                    });
                });
                clearInterval(interval);
            }
        }, 1000);
    </script>