mootools incompatibility with jQuery

The following jQuery snippet fails if a page also includes mootools-core.js.

The foo2 object has no elements. This is because find("#content") fails to return anythi开发者_开发技巧ng.

var foo1 = $("<div><div id='content'>HAGGIS</div></div>");  
var foo2 = foo1.find("#content");

alert("foo1("+foo1.length+"): "+$('<div>').append(foo1.clone()).remove().html()  
    + "\n\n" +  
      "foo2("+foo2.length+"): "+$('<div>').append(foo2.clone()).remove().html());

Ok, this is confirmed to be a problem with mootools.

mootools overrides Element.getElementById, and jQuery's find("#content") thereafter fails.

http://forum.jquery.com/topic/jquery-noconflict-mootools-load-does-not-work-with-specified-div

getElementById is in Document object so this is the correct code:

Document.prototype._getElementById = Document.prototype.getElementById;

This only works in Chrome (9.0.597.98), I will try another solution...

New Edit: Happly got it! Works in all tested browsers (hoooray!):

document._getElementById = document.getElementById;

Make a copy of getElementById and make jQuery call that one instead. Do this BEFORE mootools gets imported:

Element.prototype._getElementById = Element.prototype.getElementById;

Then do a search and replace in your jQuery source for context.getElementById and replace with context._getElementById. There are only 4 occurences in jquery-1.4.4.