?
Solved

Jquery on click function problem

Posted on 2013-05-21
4
Medium Priority
?
311 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…
Suggested Courses
Course of the Month9 days, 6 hours left to enroll

762 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