JQuery 代码对 Google Chrome 没有影响，但在 Firefox 中运行良好

Question

我使用一段 JQuery 代码和一些 Mootools 来更改某些输入的类，但问题是它在 Google Chrome 中不起作用（没有效果），尽管它在 Firefox 中工作得很好。

编辑：我发现，如果我在页面上的给定元素上单击两次，该类就会被有效添加。

我的代码

<script type="text/javascript">
  window.addEvent('domready', function(){
    var myCheck = new FormCheck('formulaire');
    $('votconj').addEvent('click', function() {
     // code inside works perfectly
});

$('votconj_no').addEvent('click', function() {
    // code inside works perfectly
});

$('nb_children').addEvent('click', function() {
  var selected = $('nb_children').getSelected();


  selected.each(function(element) {
  var val = element.get('value');
  for (var counter = 1; counter <= val; counter++) {
    $('jj_enfant' + counter).addClass("validate['required']");
    myCheck.register($('jj_enfant' + counter));
    $('mm_enfant' + counter).addClass("validate['required']");
    myCheck.register($('mm_enfant' + counter));
    $('aaaa_enfant' + counter).addClass("validate['required']");
    myCheck.register($('aaaa_enfant' + counter));
    $('last_name_enfant' + counter).addClass("validate['required','nodigit']");
    myCheck.register($('last_name_enfant' + counter));
    $('first_name_enfant' + counter).addClass("validate['required','nodigit']");
    myCheck.register($('first_name_enfant' + counter));
    // Here the good value is displayed
    alert(val);
  }

  for (var counter = parseInt(val)+1; counter <= 6; counter++) {
    $('jj_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('jj_enfant' + counter));
    $('mm_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('mm_enfant' + counter));
    $('aaaa_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('aaaa_enfant' + counter));
    $('last_name_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('last_name_enfant' + counter));
    $('first_name_enfant' + counter).removeAttribute('class');
    myCheck.dispose($('first_name_enfant' + counter));
  }
  });
});

})
...
</script>

Answer 1

为什么不使用 jQuery Ready() 来检测 Dom 何时准备就绪。
jQuery 旨在以跨浏览器的方式检测此事件，

替换

window.addEvent('domready', function(){
    var myCheck = new FormCheck('formulaire');
    $('votconj').addEvent('click', function() {
    // code inside works perfectly
});

为

$(document).ready( function(){
    var myCheck = new FormCheck('formulaire');
    $('votconj').addEvent('click', function() {
        // code inside works perfectly
    });
});

Answer 2

Firefox 6 或 Chrome 13 中都没有 addEvent 方法，至少在标准合规模式下没有。 （也许您想使用 addEventListener 方法？）

如果您使用 Quirks 模式，某些浏览器支持一些非标准方法，但如果您希望它跨浏览器工作，则不能使用这些方法。

请改用 jQuery 中的 ready 事件，该事件还为不支持该事件的浏览器（即 IE）模拟 domready 事件。

绑定事件处理程序的 jQuery 方法名为 bind，而不是 addEvent。您还可以使用click方法来绑定点击事件。

$(document).ready(function(){
  var myCheck = new FormCheck('formulaire');
  $('votconj').click(function() {
    // ...
  });
  // ...
});

请注意，HTML 中没有 votconj 元素，因此上面的选择器不匹配任何内容。

Answer 3

以下代码效果很好（我已将事件从单击更改为模糊，并且通过仅获取所选数组的最后一个元素，使代码变得更加简单和清晰）。

<script type="text/javascript">
  window.addEvent('domready', function(){
    var myCheck = new FormCheck('formulaire');
    $('votconj').addEvent('click', function() {
      // code inside works
    });

    $('votconj_no').addEvent('click', function() {
     // code inside works
    });

    $('nb_children').addEvent('blur', function() {
       var selected = $('nb_children').getSelected();

       var element = selected.getLast();

       var val = element.get('value');
       for (var counter = 1; counter <= val; counter++) {
          $('jj_enfant' + counter).addClass("validate['required']");
          myCheck.register($('jj_enfant' + counter));
          $('mm_enfant' + counter).addClass("validate['required']");
          myCheck.register($('mm_enfant' + counter));
          $('aaaa_enfant' + counter).addClass("validate['required']");
          myCheck.register($('aaaa_enfant' + counter));
          $('last_name_enfant' + counter).addClass("validate['required','nodigit']");
          myCheck.register($('last_name_enfant' + counter));
          $('first_name_enfant' + counter).addClass("validate['required','nodigit']");
          myCheck.register($('first_name_enfant' + counter));
       }

       for (var counter = parseInt(val)+1; counter <= 6; counter++) {
          $('jj_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('jj_enfant' + counter));
          $('mm_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('mm_enfant' + counter));
          $('aaaa_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('aaaa_enfant' + counter));
          $('last_name_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('last_name_enfant' + counter));
          $('first_name_enfant' + counter).removeAttribute('class');
          myCheck.dispose($('first_name_enfant' + counter));
       }

    });

})
...
</script>