在用戶編輯時檢測表單元格更改

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以及Opera Mini和IE 9的部分支持 ，但無論哪種方式，它都可以工作！

如果您需要全球支持，請查看此線程。

因此您的代碼如下所示：

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