Question

我有一个代码：

var data = $('<span onclick="someFunction(' + element + ');"><a href="#">Element information</a></span>');

其中element是一个对象。

另外，我定义了一个函数：

someFunction: function(element) {
   console.log(element);
   .... // some code
}

但是当span元素试图调用该函数时，我得到错误：

SyntaxError: missing ] after element list 
someFunction([object Object]);

当我在Firebug中调试时，我看到了

<span onclick="someFunction([object Object]);">
   <a href="#">Element information</a>
</span>

我如何通常以具体元素作为参数调用该函数？

Answer 1

您将无法传递元素，因为它在连接中转换为字符串。当一个对象转换为字符串时，它输出：[Object object]。这就是您在调试中看到的内容。

我的建议：您可以将元素作为数据添加到跨度，如：

$（'span）.data（'element'，element）;

并在someFunction中检索它：

var element = $（this）.data（'element'）;

另一种选择是绑定到初始化元素的地方点击Javascript。喜欢这个

function anotherFunction() {
  var element = {};

  // Initialize element
  ...

  // I have already got the element initialized, now I can bind the click
  $('span').click(function() {
    // For your debug and validation
    console.log(JSON.stringify(element));
  });
}

Answer 2

如果你尝试用jQuery构建一些DOM元素，你应该这样做：

// Wrong: $('<span onclick="someFunction(' + element + ');"><a href="#">Element information</a></span>');
// Right: build up the element step by step
var data = $('<span/>')
           .append(
               // build up the child <a> element here
               $('<a href="#"/>')
               .text("Element information")
               //.attr('href',"#") Don't really need this
           )
           .click(
               // Here is a real inline function
               function(){
                   someFunction(element);
               }
           );

注意：jQuery中的.click可用于为Click事件分配事件处理程序。

在原始代码中，您尝试将字符串与对象连接，这将导致将toString应用于该对象，并将其转换为字符串：

console.log((new Object()).toString()); // [object Object]
console.log("blah" + (new Object())); // blah[object Object]

在您的代码中，您的对象实际上似乎是一个jQuery对象，但它不会产生任何差异。

因此，用于形成onclick的结果“代码”无效：

someFunction([object Object]);

[和]用于在JavaScript中构造数组，如[1, 2]是一个包含两个元素的数组。但是[object Object]是一种无效的JavaScript语法，因此您会收到错误。

无论如何，这不是用事件构建DOM元素的正确方法，即使使用jQuery也是如此。以上显示了正确的方法。

Answer 3

您也可以尝试：

var data = $('<span onclick="someFunction(' + JSON.stringify(element) + ');"><a href="#">Element information</a></span>');

功能：

someFunction: function(element) { console.log(element); .... // some code }

调用时应返回JSON对象。

元素列表后的内联javascript函数调用 - 缺失]

3 个答案: