firefox addon - self.port.on conflicting with $ (jquery) .

Question

In my main.js file : I configured the contentScriptFile to be script.js . Also, this script file is embedded in index.html which is a tab which will be opened using tabs.open .

I have self.port.on and jquery related things in that script file . If self.port is written on the top of other jquery things, self.port.on is working and jquery is not working . But, self.port.on is written below, jquery is working fine and self.port is not working.

The script file actually deals with the data obtained using self.port (will come only when tab opened,).

Answer 1

What about wrap all your jQuery code in a safe environment?

Using $:

(function($) {
    // use $
})(jQuery)

Using $jq:

(function($jq) {
    // use $jq
})(jQuery)

Answer 2

使用jQuery的noConflict设置。

$jq = jQuery.noConflict(); //use $jq instead of $

Answer 3

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery , so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict() :

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
    $("div").hide();
  });
  // Code that uses other library's $ can follow here.
  $("content").style.display = 'none';
</script>

Source: jQuery.noConflict