659

Including jQuery causes standard JavaScript to stop functioning?

I'm getting started with jQuery. I'v been trying to mix it with some of my preexisting JavaScript code so I don't have to rewrite everything. I have read many places that this is totally doable. However, whenever i include any lines of jQuery the standard JavaScript stops functioning.

Here's a few examples:

<!DOCTYPE html> <html> <head> <style> #testjquery { height: 300px; width: 300px; } </style> </head> <body> <div id="testjquery" onclick="testClick()">This is the stuff.</div> <script src='jquery-1.10.2.min.js'></script> <script> $(document).ready(function() { function testClick() { document.getElementById("testjquery").style.background = "blue"; } }); </script> </body> </html>

This doesn't work, and when clicks I get a function not defined error.

But, putting this in the body

<body> <div id="testjquery">This is the stuff.</div> <script src='jquery-1.10.2.min.js'></script> <script> $(document).ready(function() { $("#testjquery").click(function() { $(this).css("background", "blue"); }); }); </script> </body>

Works fine, as does the equivalent in standard JavaScript.

Answer1:

Don't wrap your function in DOM ready($(document).ready(function(){) handler.As it is a anonymous function so your testClick() function has local scope.So you can not call it outside the DOM ready

function testClick() { document.getElementById("testjquery").style.background = "blue"; }

Read What is the scope of variables in JavaScript?

Answer2:

The following block is run when the document is ready, and creates a local function testClick() that is not visible outside of the anonymous function (the one created by function(){ on the first line).

$(document).ready(function(){ function testClick(){ document.getElementById("testjquery").style.background="blue"; } });

If you want to define a global function that can be called directly, you shouldn't put it inside a document ready handler. Change it to this instead.

function testClick(){ document.getElementById("testjquery").style.background="blue"; }

Recommend

  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • cell spacing in div table
  • Why am I getting a “405 Method not allowed” error on “Put” operations through a WCF Resful service?
  • Why isn't obj.style.left = “200px”; working in this code?
  • CSS bleed-through with cfinput type=“datefield”
  • blade.php method outputting it's result to the form
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Kendo barchart category labels left and right based on value
  • D3 get axis values on zoom event
  • How does document.ready work with angular element directives?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Custom validator control occupying space even though display set to dynamic
  • Play WS (2.2.1): post/put large request
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • jquery mobile loadPage not working
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?