Solved

Jquery on click function problem

Posted on 2013-05-21
4
301 Views
Last Modified: 2013-05-21
Hello experts.
I 'm trying to use the on('click') function but it is not working.
Any help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.qq-uploader-main:hover{background: #CC0000; cursor:pointer;border: 1px solid #DDD;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$("body").on("click", ".qq-uploader-main", function (e) {
        e.preventDefault();
	alert('test');
});
</script>
</head>

<body>
<div style="width:100%" class="qq-uploader-main"><span>Edit</span></div>
</body>
</html>

Open in new window

0
Comment
Question by:Panos
  • 2
4 Comments
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39183669
try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.qq-uploader-main:hover{background: #CC0000; cursor:pointer;border: 1px solid #DDD;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">

$("#Uploader").click(function(e) {
      e.preventDefault();
	alert('test');
});

</script>
</head>

<body>
<div style="width:100%" id="Uploader" class="qq-uploader-main"><span>Edit</span></div>
</body>
</html>

Open in new window

0
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 500 total points
ID: 39183673
You need to wrap your click function in an on ready or on load function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.qq-uploader-main:hover{background: #CC0000; cursor:pointer;border: 1px solid #DDD;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
	
	$(function(){	
		$("body").on("click", ".qq-uploader-main", function (e) {
		        e.preventDefault();
			alert('test');
		});
	})


</script>
</head>

<body>
<div style="width:100%" class="qq-uploader-main"><span>Edit</span></div>
</body>
</html>
                                  

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 39183683
Hi.
Tomarse111 you solved the problem. Thank you both.
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 39183688
thank you .
regards panos
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now