ユーザー編集時に表セルの変更を検出する

Question

ユーザー入力時にhtml表のセルの変更を検出しようとしています。テーブルセルをクリックするとテキストを入力できますが、.change関数はトリガされません。しかし、データがデータベースから取り込まれるときのページのロード時には、すべての表のセル変更変更機能が起動されます。私は理由を理解できません。手伝ってくれますか。 以下のコード：

<div id="table" class="table-editable"> 
     <table id="myTable" style="width:100%" class="table"> 
      <tr> 
       <th>Id</th> 
       <th>Link</th> 
       <th>Naslov</th> 
       <th>Lokacija</th> 
       <th>Cijena</th> 
       <th>Telefon</th> 
       <th>Posjet</th> 
       <th>Opis</th> 
       <th>Prednosti</th> 
       <th>Nedostaci</th> 
       <th>Slike</th> 
       <th>Select</th> 
      {% for entry in entries %} 
      </tr> 
      <tr> 
       <td>{{ forloop.counter }}</td> 
       <td><a id="linkHouse_{{ forloop.counter }}" href="{{ entry.link }}">Link na oglas</a></td> 
       <td contenteditable="true">{{ entry.header }}</td> 
       <td contenteditable="true">{{ entry.location }}</td> 
       <td id="priceHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.price }}</td> 
       <td id="contactHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.contacts }}</td> 
       <td id="visitedHouse_{{ forloop.counter }}" contenteditable="true">{{ entry.visited }}</td> 
       <td id="descriptionHouse_{{ forloop.counter }}" contenteditable="true">{% for line in entry.description.splitlines %} {{line}}<br> {% endfor %}</td> 
       <td id="prosHouse_{{ forloop.counter }}" contenteditable="true" >{% for line in entry.pros.splitlines %} {{line}}<br> {% endfor %}</td> 
       <td id="consHouse_{{ forloop.counter }}"contenteditable="true">{% for line in entry.cons.splitlines %} {{line}}<br> {% endfor %}</td> 
       <td > 
        <a class="fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_fjords_wide.jpg" %}"><img src="{% static "Pic/img_fjords_wide.jpg" %}" alt="" style="width:150px"></a> 
        <a class="hide fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_lights_wide.jpg" %}"><img src="{% static "Pic/img_lights_wide.jpg" %}" alt=""></a> 
        <a class="hide fancybox" target="_blank" data-fancybox="images" href="{% static "Pic/img_mountains_wide.jpg" %}"><img src="{% static "Pic/img_mountains_wide.jpg" %}" alt=""></a> 
       </td> 
       <td style="text-align: center; vertical-align: middle;"> 
        <button id="delHouse_{{ forloop.counter }}" onclick="delHouse(this.id)">Delete</button> 

        <!--<input type="checkbox" name="delete{{ forloop.counter }}">--> 
       </td> 
      </tr> 
      {% endfor %} 
     </table> 
    </div> 




$(document).ready(function(){ 
$("#myTable td") 
    .change(function() { 
     console.log("petar"); 
     var data = this.innerHTML; 
     console.log("value="+data); 
    }) 
    .change(); 

}）;

Answer 1

Javascriptのinputメソッドを使用します。

またはblurメソッド。

<div contenteditable oninput="console.log(this.innerHTML)">Change me (input)!</div> 
 

 
<div contenteditable onblur="console.log(this.innerHTML)">Change me (blur)!</div>

IE 6 & 8 and Opera Mini are not supported & IE 9 partial supportが、それよりもどちらかは、それが動作します！

グローバルサポートが必要な場合は、thisスレッドを確認してください。

だからあなたのコードは次のようになります。

$(document).ready(function(){ 
    $("#myTable td") 
    .input(function() { 
      console.log("petar"); 
      var data = this.innerHTML; 
      console.log("value="+data); 
    }) 
    .input(); 
});