Question

I’m working on a page that has both Mootools 1.4 and jQuery 1.5.1 running. I know this isn’t ideal but I don’t really have an option. The page works fine in most every browser, but not in IE8. I get the following error:

Object doesn't support this property or method

when attempting to add a click event, despite putting my jQuery-specific code in a noConflict block. Here’s a fiddle that reproduces the issue: http://jsfiddle.net/p7rFV/1/

Thanks for any ideas on what’s going on.

$.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });


document.getElementById('button').addEvent('click', function(){
   document.getElementById('tester').hide();
});

Answer 1

Two issues with your fiddle:

1. When you do, you should use jQuery.noConflict();, not $.noConflict();

2. MooTools can’t enhance DOM elements at the prototype level in IE like it can in other browsers, so you have to always be sure to pass them through $() or document.id() before using MooTools-specific functions on them. So this line fails:

   document.getElementById('tester').hide();
   

   …because the DOM element has no hide method. Instead, just use $() or document.id():

   $('tester').hide();
   document.id('tester').hide();
   

   …which will both look up the element and extend it.

Updated fiddle