jQuery onChange() 不起作用...

Question

所以我試着做一個簡單的改變小提琴。 我無法讓它工作。 不管我做什么。 為什么？

代碼

<div id="status" style="display:none">0</div>
<button class="start">GO</button>

Javascript代碼

var cntTo = 2;
var cnt = 0;

$('#status').change( function() {
  console.log('status changed');
  if ($(this).text() == '1'){
    if(cnt <= cntTo){
      getNext(cnt);
    }
  }
});



$('.start').click(function(){
  console.log('start clicked');
  console.log('text of status now: ' + $('#status').text());
  if($('#status').text() != '1'){
    console.log('setting text');
    $('#status').text('1');
    console.log('text of status now: ' +$('#status').text());
  }
});

function getNext(cnt){
  $('#status').text('0');
  console.log('getting details');
}

https://jsfiddle.net/hakz47vg/

Answer 1

.change() 函數僅限於 input、textarea 和 select。 來源： https : //api.jquery.com/change/

Answer 2

您可以直接使用 GO 按鈕單擊事件嵌入onchange函數代碼，如下所示：

$('.start').click(function(){
    if($('#status').text() != '1'){
        $('#status').text('1');
    }
else
{
  if(cnt <= cntTo){
    getNext(cnt);
  }
}
});

Answer 3

使用DOMSubtreeModified事件

DOMSubtreeModified這是用於通知文檔所有更改的一般事件。 它可以用來代替更具體的突變和突變名稱事件。參考

$('#status').bind("DOMSubtreeModified",function(){
  alert('changed');
});

工作小提琴

另一個簡單的解決方案

當#text腳本中的文本更改觸發觸發器時，您可以將其綁定到更改事件

 var cntTo = 2; var cnt = 0; $('#status').bind('change', function () { console.log('fired'); if ($(this).text() == '1'){ if(cnt <= cntTo){ getNext(cnt); } } }); $('.start').click(function(){ if($('#status').text() != '1'){ $('#status').text('1'); $('#status').trigger('change'); } }); function getNext(cnt){ $('#status').text('0'); console.log('getting details'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="status" style="display:none">0</div> <button class="start">GO</button>

Answer 4

用這個

$('#status').bind("DOMSubtreeModified",function(){

 var cntTo = 2; var cnt = 0; $(document).ready(function() { $('.start').click(function() { if ($('#status').text() != '1') { $('#status').text('1'); } }); $('#status').bind("DOMSubtreeModified",function(){ console.log('fired'); if ($(this).text() == '1') { if (cnt <= cntTo) { getNext(cnt); } } }); }); function getNext(cnt) { $('#status').text('0'); console.log('getting details'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="status" style="">0</div> <button class="start">GO</button>

Answer 5

$("start").click函數放入就緒函數中

Answer 6

您正在使用不監視或響應 div 內容的change事件。使用DOMSubtreeModified事件並在該事件上觸發操作。

 var cntTo = 2; var cnt = 0; $('#status').on("DOMSubtreeModified", function() { if ($(this).text() == '1') { if (cnt <= cntTo) { getNext(cnt); } } }); $('.start').click(function() { if ($('#status').text() != '1') { console.log('setting text'); $('#status').text('1'); console.log('text of status now: ' + $('#status').text()); } }); function getNext(cnt) { $('#status').text('0'); console.log('getting details'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="status" style="display:none">0</div> <button class="start">GO</button>

Answer 7

如果您想在div元素內修改內容時執行某些操作，您必須使用名為DOMSubtreeModified的事件，如下所示。

 $("body").on('DOMSubtreeModified', "#status", function() {

更新的小提琴

參考：

有關更多信息，請閱讀已經在堆棧溢出中討論過的線程。

jQuery 事件：檢測對 div 的 html/text 的更改