Javascript在href onclick请求中传递变量

Question

我知道这确实是基本的 JavaScript，但由于某种原因，在传递参数时我似乎无法让链接的 onclick 函数正常工作。

我尝试转义引号，添加不同类型的引号并将原始变量添加为字符串。

我让它与下面的内容一起工作，但它说“XYZ 未定义”

function renderLink(value, meta, record)
        {
            var type = record.data['name']; //value is XYZ  


            return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';
        }

function getReport(type){

    alert(type);
}

Answer 1

return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';

您需要转义字符串：

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';

Answer 2

如果您查看呈现的 HTML，您会看到问题：您的 getReport 调用如下所示：

getReport(XYZ);

我猜您想要围绕它添加引号，所以：

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';

...which renders:

getReport('XYZ');

实例

有点深奥，但是当您输出 onclick 属性作为 HTML 源的一部分时，它是当然是 HTML 属性，这意味着您可以使用字符实体。因此，您可以使用"实体：

return '<a href="javascript:void(0);" onclick="getReport("'+type+'"); return false;"></a>';

Live example

我指出这一点并不是因为我推荐它（我不推荐），而是因为记住 onclick 属性中实际发生的情况很有用。这是我强烈建议使用适当的事件处理程序的原因之一（例如，通过 addEventListener / attachEvent，或者甚至只是分配给 a 元素的 onclick 属性（一旦实例化）。

---

需要注意的是，这种做法对 record.data['name'] 的内容也非常敏感。例如，考虑一下如果 Tom's 而不是 XYZ，会发生什么情况。上面第一个选项的输出将是

getReport('Tom's');

......这显然是一个问题。同样，如果文本中有反斜杠，它将被视为结果中的转义字符，等等——有点雷区。

如果您可以更改您的 renderLink 以便它返回实际实例化的 a 元素而不是字符串，这就是我要做的：

function createLink(value, meta, record)
{
    var type = record.data['name'];         // Grab value as of when we were called
    var link = document.createElement('a');

    link.href = "javascript:void(0);";
    link.onclick = function() {             // Or even better, addEventListener / attachEvent
        getReport(type);
        return false;
    };

    return link;
}

创建链接和 闭包访问 type 而不将其转换为文本并再次返回。 （如果您不熟悉闭包，请不要担心，闭包是并不复杂。）

实例

Answer 3

getReport 接收 XYZ 作为变量而不是字符串，您需要将其放在引号内：

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';