2

私はコードをもっている：

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

要素はオブジェクトです。

また、関数が定義されています。

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

しかし、スパン要素がその関数を呼び出そうとすると、エラーが発生します:

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

でデバッグするとFirebug、

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

通常、具体的な要素を引数としてその関数を呼び出すにはどうすればよいですか?

4

3 に答える 3

4

連結で文字列に変換されるため、要素を渡すことはできません。オブジェクトが文字列に変換されると、[オブジェクト オブジェクト] が出力されます。これは、デバッグで表示されているものです。

私の提案: 次のように要素をデータとしてスパンに追加できます。

$('span).data('要素', 要素);

そして someFunction では、次のように取得します。

var element = $(this).data('element');

もう 1 つのオプションは、要素が初期化される場所で 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));
  });
}
于 2012-12-12T06:51:54.527 に答える
1

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);
               }
           );

注: .clickjQuery では、Click イベントのイベント ハンドラーを割り当てるために使用できます。

元のコードでは、文字列をオブジェクトに連結しようとしています。これにより、toStringそのオブジェクトに適用され、文字列に変換されます。

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

コードでは、オブジェクトは実際には jQuery オブジェクトのように見えますが、違いはありません。

したがって、フォームに使用される結果の「コード」onclickは無効です。

someFunction([object Object]);

[2 つの要素を持つ配列の]ように、JavaScript で配列を構築するために使用されます。[1, 2]ただし[object Object]、無効な JavaScript 構文であるため、エラーが発生します。

とにかく、これは、jQuery を使用しても、イベントで DOM 要素を構築する正しい方法ではありません。上記は正しい方法を示しています。

于 2012-12-12T07:05:41.247 に答える