jQuery在IE上返回一个空输入值

Question

HTML:

<div id="fields">
    <input type="text" name="someField" />
    <!-- NOTE: There are some more fields here -->
</div>
<!-- NOTE: There are some more fields here -->

第一个JS文件:

jQuery(document).ready(function($) {
    alert($('#fields input[type="text"]').val());
});

第二个JS文件:

jQuery(document).ready(function($) {
    $('#fields input[type="text"]').val('someValue');
});

笔记:

1. JS文件位于head标记内.
2. 我被迫在第二个JS文件中设置输入值.
3. 它适用于Firefox,Opera,Chrome,Safari.
4. IE7和IE8返回一个空值.

任何帮助表示赞赏!谢谢!

Answer 1

而不是假设将在您的第一个"就绪"处理程序中设置该值,使其处理自定义事件,然后从第二个文件触发该事件.

第一档:

jQuery(function($) {

   $('#fields input[type="text"]').on('value-ready', function() {
      alert(this.value);
   });

});

第二档:

jQuery(function($) {
  $('#fields input[type="text"]').val("whatever").trigger('value-ready');
});

等一下......这也有同样的问题:-)坚持下去,我会解决它...并停止向我推销,直到我这样做:-)

好吧,假设我是对的,问题是依赖于"就绪"处理程序的评估顺序(这实际上是一种"代码味道"猜测;可能还有其他一些问题),我所做的改变不会真的救命.如果第二个块首先运行,那么事件处理程序将不会被设置!

我认为强制排序的唯一真正方法是设置某种"承诺"系统,或者只是在元素上使用标记,以及处理程序.这样,第一个块中的代码可以检查值赋值是否已经发生.它有点笨重,但至少它是明确的:

jQuery(function($) {
  var input = $('#fields input[type="text"]');
  if (input.data('value-ready'))
    alert("value already set: " + input.val());
  else
    input.on('value-ready', function() {
      alert("value is now set: " + input.val());
    });
});

然后在第二个文件中:

jQuery(function($) {
  $('#fields input[type="text"]').val("whatever")
    .data("value-ready", true)
    .trigger("value-ready");
});