Question

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function blub()
{
    var x = $("#content").attr("data-x");
    $("#content").append(x);
});
</script>
</head>
<body>
<div id="content">
    <a href="" data-x="12" onClick="blub()">Link</a><br/>
</div>
</body>
</html>

导致“ReferenceError：找不到变量：blub”

我遗失的最明显的事情是什么？

Answer 1

试试这个：

function blub()
{
    var x = $("#content").attr("data-x");
    $("#content").append(x);
}

而不是使用：

$(function blub()
{
    var x = $("#content").attr("data-x");
    $("#content").append(x);
});

在您的代码中，您正在调用函数（callback）而不声明它。这不是声明函数的正确方法。

JavaScript Functions

根据您的代码，您不需要在document ready上执行任何操作，因为当任何人点击锚Link时您的功能会触发。第二件事是您的代码不正确请参阅此$("#content").attr("data-x")这里您尝试获取data-x div的content属性，但您的div不包含该属性使用此$("a").attr("data-x") 1}}：

请尝试以下代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub() //-- It's declarition of an function 
{
    var x = $("a").attr("data-x");
    $("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
    <a href="" data-x="12" onClick="blub()">Link</a><br/>
</div>
</body>
</html>

Working Example

Answer 2

试试这个：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub()
{
    var x = $("#content").attr("data-x");
    $("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
    <a href="" data-x="12" onClick="blub()">Link</a><br/>
</div>
</body>
</html>

Answer 3

函数blub对于你的脚本是本地的，因为你通过用$（...）;包装你的代码将它作为参数传递给jQuery对象。您的功能在DOM完成加载时执行，但在本地范围内执行，您无法从事件属性访问该范围。解决问题的最佳方法是不使用事件属性。而且，div #element没有“data-x”属性。它的孩子有一个元素。试试this：

$(function() {
    $("#targetlink").click(function(e) {
        e.preventDefault();
        var x = $("#targetlink").attr("data-x");
        $("#targetlink").append(x);
    })
});

Answer 4

您收到错误的原因是因为它无法在代码.attr("data-x");上找到值<div id="content">。它根本就不存在。如果您希望在data-x="12"代码中附加<div>作为值，则可以执行以下操作：

<html>
<body>
<div id="content"> 
    <a href="#" data-role="appender" data-x="1234">Link</a>
    <br/>
</div>
</body>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $('a[data-role="appender"]').click(function (e) {
                e.preventDefault();
                var x = $(this).data('x');
                $('#content').append(x);
            });
        });
    </script>
</html>

上面的代码将代码附加到jQuery中的.click函数，并使用$('a[data-role="appender"]')连接，使您的标记更清晰。希望这会有所帮助！可以在此处找到工作解决方案：http://jsfiddle.net/TrV8z/

点击时无法调用功能

4 个答案: