5

タグの HTML コードを作成する関数を作成する必要があり、この関数は作成されたタグのイベントにa関数ハンドラも渡します。コード： onclicka

function a(text,functionHandler){
    return '<a href="#" onclick="'+functionHandler+'">'+text+'</a>';
}

//usage
var a1 = a('link',function(){
   alert('test');
});

関数を文字列に渡しても機能しません。だから私の質問は：how to pass a function handle to onclick event and get a HTML code of created a tag?

4

5 に答える 5

5

現在のアプローチにはいくつかの問題があります-

  1. functionがキーワードです。パラメータとして使用することはできません。
  2. あなたがそれを使用している方法では、ここに関数名が必要です。コールバックを渡しても役に立ちません。

アンカーを文字列として返すのではなく、要素として返します -

function createAnchor(text, clickHandler) {
    var link = document.createElement('a');    // creates an anchor element
    link.href = "#";                           // sets the href
    link.onclick = clickHandler;               // sets the click handler
    link.innerHTML = text;                     // assigns the inner html string

    return link;                               // now return it
}

その後 -

var myAnchor = createAnchor('link', function () {
    alert('test');
});

// Add this element wherever you want

createElementおよびelementに関するドキュメントを参照してください。

編集

このアンカー要素を既存の DOM 要素に子として追加する場合は、appendChildを使用します-

var myAnchor = createAnchor('link', function () {
    alert('test');
});

document.getElementById('x').appendChild(myAnchor);

ライブ JSFiddle。

編集2

アンカー文字列が本当に必要な場合は、上記の関数を使用してアンカー要素を作成し、それを子として目的の要素に追加してからinnerHTML、親で使用します。アプローチはここに示されています -

function createAnchorString(parentId, text, clickHandler) {
    var link,
        parent;

    link = createAnchor(text, clickHandler);    // call the previous function
    parent = document.getElementById(parentId);
    parent.appendChild(link);

    return parent.innerHTML;
}

var myAnchorString = createAnchorString('x', 'link', function () {
    alert('test');
});

alert(myAnchorString);

ライブフィドル。

于 2013-08-29T12:44:16.473 に答える
1

次のように試すことができます：

function a(text, callback)
{
    var obj = document.createElement("a");

    obj.textContent = text;
    obj.onClick = callback;
    return obj.outerHTML;
}

問題は、コールバック引数として渡された無名関数をどのように処理するかです。

編集 これは今すぐ動作するはずです：

function a(text, callback){
    return '<a href="#" onclick="if(!this.fireFunc)this.fireFunc='
            + callback.toString()
            + ';this.fireFunc();">'+text+'</a>';
}

無名関数で toString() を使用するだけで、そのコードを取得できます。

これは非常にハックな方法であり、名前付き関数では機能しません (機能させるのは難しくありません)。

フィドル http://jsfiddle.net/gZ3YD/1/

于 2013-08-29T12:47:09.047 に答える