Question

我使用了一些带有一些Mootools的JQuery代码来改变某些输入的类别，但事实是它在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

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

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

在jQuery中使用ready事件，它也为不支持它的浏览器（即IE）模拟domready事件。

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

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

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

Answer 2

为什么不使用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 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>

JQuery代码对Google Chrome没有任何影响，但在Firefox中完美运行

3 个答案: