0

かなり検索しましたが、見つけた答えのどれも 100% 機能していません。

基本的に、ポップアップにいくつかのボタンを表示してから、同じ関数を異なるパラメーターで呼び出す必要があります。概念：

<button onclick="foo(1,2);">Button 1</button>
<button onclick="foo(2,3);">Button 2</button>

シンプルで直接的な方法をいくつか試しましたが、どれもうまくいきません。関数からコードを取り出して popup.js にコードを含めると、機能します (私の関数は問題ありません)。

私はもう試した：

$('#btn1').click(function(e) {
    alert('btn1');
});

としても

document.getElementById('btn1').addEventListener('click',doSomething(1,2));

また、ボタン addEventListener の中に追加しようとしましたdocument.addEventListener('DOMContentLoaded', function() {....});

興味深いのは、私の popup.js に button.addEventListener が含まれている場合、ブラウザ アクションをクリックすると最初のイベントが発生し、その後何も機能しないことです。これは、クリック イベント リスナーが DOMContentLoaded リスナー内にあるかどうかに関係なく発生します。

これはCSPの問題だと感じていますが、うまくいかないようです。

疑問符を探している方へ: popup.html/popup.js 内から、onclick イベントに基づいて異なるパラメーターを使用して単一の関数を呼び出すにはどうすればよいですか?

4

1 に答える 1

2

問題

SOにコピーするときに略語を使用しただけかどうかはわかりませんが、指定したコードはどれも「貼り付けたとおり」に機能しません。

  • ボタンにIDがないため、IDにバインドします（これは、最初の貼り付けでは関係がなかったからだと思います！）
  • 2 番目のペーストでは jQuery ライブラリを使用しているため、jQuery が含まれていて許可されていることを確認する必要があります: https://stackoverflow.com/a/10928761/969807
  • 3 番目の貼り付けでは、addEventListener の 2 番目のパラメーターは、イベントを最初で唯一のパラメーターとして受け入れる関数にする必要があります (必要な場合)。（読む）

解決

あなたが説明するシナリオでイベントをバインドする最も一般的な方法は次のようになります。

document.getElementById('btn1').addEventListener('click', function (){
    foo(1, 2);
}, false);

 

ただし、ボタンの数が多い場合 (または可変数の場合) は、おそらく次のようにします。

popup.html:

<div id="buttons">
  <button data-param1="1" data-param2="2">Button 1</button>
  <button data-param1="2" data-param2="3">Button 2</button>
</div>

popup.js:

var els = document.querySelectorAll('#buttons button'),
    i, total, param1, param2;

for (i = 0, total = els.length; i < total; i++) {
  el = els[i];

  param1 = parseInt(el.getAttribute('data-param1'));
  param2 = parseInt(el.getAttribute('data-param2'));

  el.addEventListener('click', function (){ foo(param1, param2) }, false);
}
于 2013-01-03T09:00:22.770 に答える