href onclickリクエストのJavascriptパス変数

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>'; 

を...レンドERS：

getReport('XYZ'); 

Live example

やや難解な、しかし、あなたを出力onclick属性は、HTMLソースの一部として、それはもちろん、あなたが文字エンティティを使用できることを意味するHTML属性です。だからは"エンティティ使用することができます

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

Live example

を私は（私にはない）ことをお勧めしますが、ではないので、私はこれを指摘し、それは本当にで何が起こっているかを覚えておくと便利ですので、 onclick属性。これは適切なイベントハンドラ（例えば、addEventListener/attachEvent経由、またはインスタンス化された後は要素のonclickプロパティへの割り当てなど）を使用することを強く推奨する理由の1つです。

---

それはそれを行うためのこの方法はまた、コンテンツrecord.data['name']のに非常に敏感であることに注意することが重要です。たとえば、XYZの代わりにTom'sの場合はどうなるか考えてみてください。上記の最初のオプションの出力は、

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にアクセス閉鎖を作成しますそれをテキストに戻したり、元に戻したりする必要はありません。 （閉鎖に慣れていない場合は心配しないでください。closures are not complicated。）

Live example

Answer 3

getReportはXYZを受け取る：

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