0

何かを dom (ag-grid の cellrenderer) に返す関数があります。document.createElement() で 2 つの異なる要素を作成し、addEventListener() でイベント リスナーをアタッチし、それらを 1 つの関数で返すことは可能ですか?

たとえば、これは機能しますが、次の 2 つの要素を返す必要があります。

function() {

  var el = document.createElement('input');

  el.addEventListener('click', function () {
       console.log("el clicked");
  });

  return el;

}

//returns <input/> into the dom, and attaches eventlistener

これが私がやろうとしていることです。HTMLを返すようにする唯一の方法は、戻り時にouterHTMLメソッドを追加することですが、その方法でイベントリスナーを追加するようには見えません。.outerHTML を外すと、[object HTMLInputElement][object HTMLButtonElement] が返されます。

function() {

  var el = document.createElement('input');
  var el2 = document.createElement('button');

  el.addEventListener('click', function () {
       console.log("el clicked");
  });
  el2.addEventListener('click', function () {
       console.log("el2 clicked");
   });

  return el.outerHTML + el2.outerHTML

}

//want this to return <input/><button/> with eventlisteners attached
4

1 に答える 1

1

これは、イベントが dom 要素に添付されているためです。これらの要素の html マークアップを取得すると、添付されたハンドラが失われます。

次のような両方の要素を含むDocumentFragmentを返すことができます

function x() {

  var el1 = document.createElement('input');

  var el2 = document.createElement('button');
  el2.innerText = 'Button';

  el1.addEventListener('click', function() {
    snippet.log("el1 clicked");
  });
  el2.addEventListener('click', function() {
    snippet.log("el2 clicked");
  });

  var fragment = document.createDocumentFragment();
  fragment.appendChild(el1);
  fragment.appendChild(el2);
  return fragment;

}

document.body.appendChild(x())
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

HTMLを返したい場合は、次のonclickような属性を使用できます

function x() {

  var el1 = document.createElement('input');

  var el2 = document.createElement('button');
  el2.innerText = 'Button';

  el1.setAttribute('onclick', 'el1click()');
  el2.setAttribute('onclick', 'el2click()');

  return el1.outerHTML + el2.outerHTML

}

function el1click() {
  snippet.log("el1 clicked");
}

function el2click() {
  snippet.log("el2 clicked");
}

ct.innerHTML = x();
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<div id="ct"></div>

于 2016-02-23T02:59:30.553 に答える