javascript - How to fix “element.dispatchEvent is not a function” without breaking something else? - Stack Overflow

admin管理员组

文章数量:1271802

I have same problem as "element.dispatchEvent is not a function" js error caught in firebug of FF3.0 but in google chrome.

I have wrote <script>jQuery.noConflict();</script> after all scripts. But now I have another problem:

  ...
  $("a.try").click(function () {
  ...

undefined is not a function

and

 ...
 var blockHeight = $(window).height();
 ...

undefined is not a function

Thus first fix is not valid.

P.S.

html part where I include scripts:

....
<script type="text/javascript"
        src=".js"></script>
<![endif]-->
<script type="text/javascript"
        src="<c:url value='/resources/js/underscore.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/jquery-1.8.2.min.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/jquery.mousewheel.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/popup.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/jquery.jscrollpane.min.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/scroll-startstop.events.jquery.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/jquery-ui-1.10.0.custom.min.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/script-ini.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/map/map.js'/>"></script>
<script type="text/javascript"
        src="//maps.google/maps/api/js?sensor=true&js?v=3.exp&libraries=places"></script>

<script type="text/template" id="terminal-template">
    ...
</script>
<style>
    .grey-terminal {
        background-color: rgb(226, 226, 226);
    }
</style>
<script type="text/javascript"
        src="<c:url value='/resources/js/addTerminal.js'/>"></script>
<script>jQuery.noConflict();</script>
...

Can you advise another way?

I have same problem as "element.dispatchEvent is not a function" js error caught in firebug of FF3.0 but in google chrome.

I have wrote <script>jQuery.noConflict();</script> after all scripts. But now I have another problem:

  ...
  $("a.try").click(function () {
  ...

undefined is not a function

and

 ...
 var blockHeight = $(window).height();
 ...

undefined is not a function

Thus first fix is not valid.

P.S.

html part where I include scripts:

....
<script type="text/javascript"
        src="http://html5shim.googlecode./svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"
        src="<c:url value='/resources/js/underscore.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/jquery-1.8.2.min.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/jquery.mousewheel.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/popup.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/jquery.jscrollpane.min.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/scroll-startstop.events.jquery.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/jquery-ui-1.10.0.custom.min.js'/>"></script>

<script type="text/javascript"
        src="<c:url value='/resources/js/script-ini.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/map/map.js'/>"></script>
<script type="text/javascript"
        src="//maps.google./maps/api/js?sensor=true&js?v=3.exp&libraries=places"></script>

<script type="text/template" id="terminal-template">
    ...
</script>
<style>
    .grey-terminal {
        background-color: rgb(226, 226, 226);
    }
</style>
<script type="text/javascript"
        src="<c:url value='/resources/js/addTerminal.js'/>"></script>
<script>jQuery.noConflict();</script>
...

Can you advise another way?

• javascript
• jquery
• events
• dispatchevent

Share Improve this question Follow edited May 23, 2017 at 12:07 CommunityBot 111 silver badge asked Nov 22, 2014 at 17:48 gstackoverflowgstackoverflow 37.1k137137 gold badges416416 silver badges782782 bronze badges 2

• jQuery is not loaded.... and noConflict should be at before of using the script not after the script... – Bhojendra Rauniyar Commented Nov 22, 2014 at 17:49
• @Bhojendra - C-Link Nepal please read my update. Can you advice how to rewrite this code? – gstackoverflow Commented Nov 22, 2014 at 17:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

When you call jQuery.noConflict(); you no longer associate jQuery with the $ variable.

So things like $().click or $(selector) will throw errors. Instead, you can do something like this:

jQuery.noConflict();
jQuery('a.try').click(handler);
jQuery(window).height();

Or, you can also assign jQuery to a new variable, like this:

var j$ = jQuery.noConflict();
j$('a.try').click(handler);
j$(window).height();

http://jsfiddle/wL4mc03a/

Edit

As for dispatching events, one way you can do this (using jQuery) is to trigger the event. Say you have some code that looks like this:

jQuery(document).on('keydown', function(e){
    if (e.which === 42) {
        alert('That is the key to life!');
    }
});

Later, you can trigger this event. Instead of triggering the event using a string ('keydown'), we'll create an jQuery event and pass that.

var evt = jQuery.Event('keydown');
evt.which = 42;

jQuery(document).trigger(evt);

This helped me! Adding jQuery.noConflict(); just before starting the jquery code and then replacing all '$' with 'jQuery'.

<script type="text/javascript">
  
    jQuery.noConflict();
    jQuery(document).ready(function() {
        ....
        ....
    });
</script>

Same as mentioned in the above solution @Jack

本文标签：