3

目標:イベント ハンドラーを、mustache テンプレート/スクリプト内にネストされた contenteditable div にアタッチします。

問題:編集可能にしたい口ひげの js テンプレートがあります。キーアップ時にイベントをトリガーする必要があるという考え方です（後で同じデータサーバー側を更新するために使用するため）。

ブロックは編集可能ですが、contenteditable イベントは script タグ内で発生しません。

親がcontenteditable divであるcontenteditable子のkeyupイベントを検出し 、ネストされたコンテンツ編集可能（jQuery）でKeypressイベントを 検出 しますが、テンプレートシナリオを扱うものはありません。

HTML

<script id="post" type="text/template">
    <div class="editable" contenteditable="true">  
        <h2>{{bio}}</h2>
        <p>{{summary}}</p>
    </div>

    <span class="child" contenteditable="true">static inside template.</span>

</script>

JQuery

  $('.editable').on('keyup', function() {
      alert('editable changed')
  });

  $('.child').on('click', function() {
    alert('static child changed')
  });
4

1 に答える 1

5

バインド時に dom に存在する親にイベントをバインドする (デリゲート)

$(document.body).on('keyup','.editable', function() {
  alert('editable changed')
  })
 .on('click','.child', function() {
    alert('static child changed')
  });
于 2013-11-02T05:18:52.600 に答える