3

次の Javascript を検討してください (これはおそらく最適なスタイルではありません)。

var string = "There's an error here";
parent.innerHTML = '<div onclick="foo(\'+string+\')">'+string+'</div>';

一重引用符のため、結果の HTML は有効ではありません。

'<div onclick="foo('There's an error here')">There's an error here</div>'

1 つの解決策は、要素自体innerHTMLを引数として使用することですfoo()(関数の引数がたまたま要素の内容と同じであるため)。ただし、これは一般的な解決策ではありません。

インライン HTML ソリューションのみを使用してこの問題に対処することは可能ですか? 私の場合、インライン HTML ははるかに大きく、DOM 関数を使用して HTML を作成および追加し、onclick 関数のクロージャーを使用して、より「適切な」形式に簡単に変換することはできません。

4

1 に答える 1

3

あなたの主な問題は、を使用する代わりにインライン属性を使用してイベントハンドラーをアタッチしようとしていると言えますaddEventListener。優れた慣行を尊重すれば、すべての問題は解消されます。

myDiv.addEventListener('click', function () {
    foo("There's an error here");
});

ただし、それでも自分のやり方でやりたい場合は、一重引用符をエスケープするだけです。

parent.innerHTML = '<div onclick="foo(\'' + string.replace(/'/g, "\\'") + '\');">' + string + '</div>';
于 2013-09-10T03:06:14.313 に答える