Динамически измененное значение ввода не отражается в DOM - PullRequest
Новая
       2

Динамически измененное значение ввода не отражается в DOM

7 голосов
/ 18 апреля 2011

Как я могу получить DOM для отражения измененного значения ввода? 

<div>
  <input value='0'>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>

<script>
setInterval(function() {
  $('input').val(parseInt($('input').val()) + 1)
  console.log('div.html(): ', $('div').html())
}, 1000)
</script>

Ответы [ 3 ]

5 голосов
/ 18 апреля 2011

Попробуйте изменить DOM напрямую.Например: 

<div id="myDiv">
  <input id="myInput" value='0'>
</div>

<script>
setInterval(function() {
    var v = parseInt(document.getElementById("myInput").value) + 1;
    document.getElementById("myInput").setAttribute("value",v);
}, 1000);
</script>

<input type="button" onclick="javascript:alert(document.getElementById('myDiv').innerHTML);" value="Click to see DOM" />
4 голосов
/ 18 апреля 2011

Мне кажется, что мне подходит следующее:

http://jsfiddle.net/h8AP8/1/

Вся заслуга gnarf здесь и его формы:

jQuery html () в Firefox(использует .innerHTML) игнорирует изменения DOM

Таким образом, ваш измененный код будет: 

<div>
  <input value='0'>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>

<script>
(function($) {
  var oldHTML = $.fn.html;

  $.fn.formhtml = function() {
    if (arguments.length) return oldHTML.apply(this,arguments);
    $("input,button", this).each(function() {
      this.setAttribute('value',this.value);
    });
    $("textarea", this).each(function() {
      // updated - thanks Raja!
      this.innerHTML = this.value;
    });
    $("input:radio,input:checkbox", this).each(function() {
      // im not really even sure you need to do this for "checked"
      // but what the heck, better safe than sorry
      if (this.checked) this.setAttribute('checked', 'checked');
      else this.removeAttribute('checked');
    });
    $("option", this).each(function() {
      // also not sure, but, better safe...
      if (this.selected) this.setAttribute('selected', 'selected');
      else this.removeAttribute('selected');
    });
    return oldHTML.apply(this);
  };

  //optional to override real .html() if you want
  // $.fn.html = $.fn.formhtml;
})(jQuery);


setInterval(function() {
  $('input').val(parseInt($('input').val()) + 1)
  console.log('div.html(): ', $('div').formhtml())
}, 1000)
</script>
0 голосов
/ 18 апреля 2011

Извините, но проблема не в приведенном вами примере кода.Или, когда это единственный html на вашей странице, вы пропускаете начальный и закрывающий теги.

Эта чистая страница отлично работает на моем компьютере: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head></head>
    <body>
        <div><input value='0'></div>

        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
        <script>
        setInterval(function() {
          $('input').val(parseInt($('input').val()) + 1)
          console.log('div.html(): ', $('div').html())
        }, 1000);
        </script>
    </body>
</html>

Или вы тестируетев Internet Explorer?В этом случае удалите строку, которая ведет к вашей консоли ошибок: 

console.log('div.html(): ', $('div').html())
...