4

次のような動的なDOM要素をいくつか作成しています。

var anchorElement = jQuery('<a />',{text:property.text});
var liElement = jQuery('<li />',{"class":"navlink_"+i,id:"navlink_"+i});
anchorElement.on('click',property.fnctn);
liElement.append(anchorElement);
parentID.append(liElement);

propertyJSONオブジェクトは どこにありますか。property.textアンカー要素に入れたいテキストです。（正常に動作します）

そのアンカー要素にクリックイベントハンドラーをアタッチしたいと思います。その要素にバインドする必要のある関数はJSONで指定されており、次のようにアクセスできます。

property.fnctn

次の行は、イベントハンドラーをアンカー要素にバインドする必要があります。

anchorElement.on('click',property.fnctn);

これは機能していなかったので、次のような文字列に変換してみました。

anchorElement.on('click',property.fnctn.toString());

失敗...

このリンクをクリックすると、エラーがコンソールに記録されます

オブジェクトにはメソッド'apply'がありません。理由は何ですか...？？？

私はそれを次のようなわずかな回避策で動作させることができます

anchorElement.attr('onclick',property.fnctn+"()");

.on()上記のステートメントは機能しますが、 APIが機能しない理由を知りたいです。

ありがとう:)AÐitya。

4

1 に答える 1

8

更新：

あなたはそれproperty.actfnが文字列だと言いました、"paySomeoneClick"。イベントハンドラーには文字列を使用せず、代わりに関数を使用することをお勧めします。文字列で定義された関数paySomeoneClickを呼び出す必要があり、その関数がグローバルである場合は、次のように実行できます。

anchorElement.on('click',function(event) {
    return window[property.fnctn](event);
});

これは、グローバル関数がグローバルオブジェクトのプロパティであり、ブラウザで利用できるwindowため、および以下で説明する括弧で囲まれた表記のために機能します。

関数が参照先のオブジェクト上にある場合、次のようになります。

anchorElement.on('click',function(event) {
    return theObject[property.fnctn](event);
});

これが機能するのは、JavaScriptでは、2つの方法でオブジェクトのプロパティにアクセスできるためです。リテラルプロパティ名を使用したドット表記（プロパティにfoo.barアクセス）と、文字列プロパティ名を使用した括弧付き表記（）です。もちろん、括弧で囲まれた表記法を除いて、これらは同等です。文字列は、のようなプロパティ値からのものを含め、式の結果である可能性があります。barfoofoo["bar"]property.fnctn

ただし、関数名を文字列で渡さないように、少し戻ってリファクタリングすることをお勧めします。時々それは正しい答えですが、私の経験では、頻繁ではありません。:-)

元の答え：

（これはproperty.fnctn、文字列ではなく関数であると想定しています。しかし、誰かに役立つかもしれません...）

コード

anchorElement.on('click',property.fnctn);

関数をイベントにアタッチしますが、関数の呼び出し中に、オブジェクトではなくthisDOM要素を参照します。property

これを回避するには、jQueryの$.proxy：を使用します。

anchorElement.on('click',$.proxy(property.fnctn, property));

...またはES5のFunction#bind：

anchorElement.on('click',property.fnctn.bind(property));

...または閉鎖：

anchorElement.on('click',function(event) {
    return property.fnctn(event);
});

もっと読む（私のブログで）：

于 2012-07-26T09:30:03.357 に答える