Question

所以我试着做一个简单的改变小提琴。我无法让它发挥作用。不管我做什么。为什么？

HTML CODE

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

Javascript CODE

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这是通知文档所有更改的一般事件。它可以用来代替更具体的突变和突变名称事件。 Reference

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

工作fiddle

另一个简单的解决方案

当脚本中的#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(){

＆＃13;

	
  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');
	}

＆＃13;

<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>

＆＃13;

Answer 5

$("start").click函数放入就绪函数

Answer 6

您正在使用change事件，该事件不会关注或响应div内容。请使用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() {

UPDATED FIDDLE

<强>参考：

有关更多信息，请在堆栈溢出中读出已经讨论过的线程。

jQuery Event : Detect changes to the html/text of a div

jQuery onChange（）不起作用......

7 个答案: