w3schoon Posted February 13, 2013 Share Posted February 13, 2013 Nice be with you everyone! My problem is: Every time I click "#show" my prompt is continuously appearing though I click OK, cancel or close? Here is my code: <script type="text/javascript" src="javascripts/jquery-1.9.1.min.js"></script> <script> $(document).ready(function(){ $("#weight").hover(function(){ $("#show").css("display", "block"); }, function(){ $("#show").css("display", "none"); $("#show").mouseenter(function(){ $(this).data("mouse", "enter"); if ($(this).data("mouse") == "enter"){ $(this).css("display", "block").click(function(){ var converted = prompt ("Convert poud to kilograms:","")answer = converted * 0.45359237; // 1 lb = 0.45359237 kganswer = answer.toFixed(2); if (!isNaN(converted)) { // If not illegal number if (converted != 0) { // If not empty valuealert(converted + " poud = " + answer + " kilograms");$("#weight").val(answer); } else alert("Error: Empty value!"); // If empty value } else alert("Error: Illegal number!"); // If illegal number });}});});}); </script> Take a look my attached picture. Thank you. Link to comment Share on other sites More sharing options...
callumacrae Posted February 13, 2013 Share Posted February 13, 2013 Correct spacing would help, here, the problem is extremely obvious with tabs: $(document).ready(function () { $("#weight").hover(function () { $("#show").css("display", "block"); }, function () { $("#show").css("display", "none"); $("#show").mouseenter(function () { $(this).data("mouse", "enter"); if ($(this).data("mouse") == "enter") { $(this).css("display", "block").click(function () { var converted = prompt("Convert poud to kilograms:", "") answer = converted * 0.45359237; // 1 lb = 0.45359237 kg answer = answer.toFixed(2); if (!isNaN(converted)) { // If not illegal number if (converted != 0) { // If not empty value alert(converted + " poud = " + answer + " kilograms"); $("#weight").val(answer); } else alert("Error: Empty value!"); // If empty value } else alert("Error: Illegal number!"); // If illegal number }); } }); });}); You're setting a mouseenter handler inside another event handler, and so it will be set multiple times. Then inside the mouseenter handler, you're setting the click handler, so that will be set a lot more times.You should set the event handlers outside of the existing event handlers to prevent them from being added multiple times. 1 Link to comment Share on other sites More sharing options...
w3schoon Posted February 14, 2013 Author Share Posted February 14, 2013 (edited) Oh.. I see.. Thanks but is there anything I can do besides set the event handlers outside of the existing event handlers ?Like methods or functions that will stop alert/prompt form continuously appearing? Edited February 14, 2013 by w3schoon Link to comment Share on other sites More sharing options...
w3schoon Posted February 14, 2013 Author Share Posted February 14, 2013 (edited) @ Callumacrae: Wow! Thank you very much! I followed your advice and it works! You should set the event handlers outside of the existing event handlers to prevent them from being added multiple times. -Callumacrae I set my jQuery click event handler outside jQuery hover & mouseenter event handlers and it works! Here's my code: $(document).ready(function(){ $("#weight").hover(function(){ $("#show").css("display", "block"); }, function(){ $("#show").css("display", "none").mouseenter(function(){ $(this).css("display", "block").mouseleave(function(){ $(this).css("display", "none"); }); }); }); $("#show").click(function(){ $(this).css("display", "none"); var a=prompt("Convert pouds to kilograms:",""); b=a * 0.45359237; // 1 lb = 0.45359237 kg b=b.toFixed(2); if (!isNaN(a)) { // If not illegal number if (a != 0) { // If not empty value alert(a + " pouds = " + b + " kilograms"); $("#weight").val(; } else alert("Error: Empty value!"); // If empty value } else alert("Error: Illegal number!"); // If illegal numer }); }); Edited February 14, 2013 by w3schoon Link to comment Share on other sites More sharing options...
dsonesuk Posted February 14, 2013 Share Posted February 14, 2013 (edited) What he was trying to say is NOT nest these events within others, i.e don't use the mouseevent, mouseleave events within the hover event trigger, keep separate from each other. $('.whatever').hover(function(){ // run code for this event}); $('.whatever').mouseenter(function(){// run code for this event}); $('.whatever').mouseenter(function(){// run code for this event}); Edit: 2 create outer container and use this for hover etc $(document).ready(function () {$("#show").css({"visibility": "hidden" , "display": "block"}); $("#weight_wrapper").hover(function () { $("#show").css("visibility", "visible"); }, function () { $("#show").css("visibility", "hidden"); }); $('#show').click(function () {$("#show").css("visibility", "hidden"); var converted = prompt("Convert pound to kilograms:", "") answer = converted * 0.45359237; // 1 lb = 0.45359237 kg answer = answer.toFixed(2); if (!isNaN(converted)) { // If not illegal number if (converted != null && converted != 0) { // If not empty value alert(converted + " pound = " + answer + " kilograms"); $("#weight").val(answer); } else alert("Error: Empty value!"); // If empty value } else alert("Error: Illegal number!"); // If illegal number }); }); <fieldset id="weight_wrapper"><input id="weight" type="text" /><input id="show" type="button" value="convert" /></fieldset> Edited February 14, 2013 by dsonesuk 1 Link to comment Share on other sites More sharing options...
w3schoon Posted February 14, 2013 Author Share Posted February 14, 2013 (edited) @ dsonesuk: Thank's for editing, I really appreciated your effort and I learned a lot of things I have another question my friends, Is it good practice to place jQuery selectors in a variables for optimisation? Here's my code: $(document).ready(function(){ $("form").submit(function(){ var a=$("#position"); var b=$("#job"); var c=$("input#religion"); var d="Others"; if (a.val() == "" && b.val() == d ){ b.val("").focus(); return false; } if (c.val() == d){ c.val("").focus(); return false; } }); }); Edited February 14, 2013 by w3schoon Link to comment Share on other sites More sharing options...
thescientist Posted February 14, 2013 Share Posted February 14, 2013 yes. any variable in particular that requires some sort of lookup, like when iterating over an array of objects for example, it is helpful to cache that particular index. //assumes people is a predefined array of people objectsfor(var i = 0, l = people.length; i < l; i++){ var person = people[i]; console.log("Hi, my name is " + person.firstName + " " person.lastName); console.log("I am " + person.age + " and I live in " + person.location);}; or, in the case of what you're doing with jQuery, caching DOM elements instead of hitting the DOM multiple times to call method on the returned object. 1 Link to comment Share on other sites More sharing options...
callumacrae Posted February 15, 2013 Share Posted February 15, 2013 @ dsonesuk: Thank's for editing, I really appreciated your effort and I learned a lot of things I have another question my friends, Is it good practice to place jQuery selectors in a variables for optimisation? Here's my code: $(document).ready(function(){ $("form").submit(function(){ var a=$("#position"); var b=$("#job"); var c=$("input#religion"); var d="Others"; if (a.val() == "" && b.val() == d ){ b.val("").focus(); return false; } if (c.val() == d){ c.val("").focus(); return false; } }); }); Yeah, that's good practice. Micro-optimisations like this and caching the length of an array doesn't really make any difference, but they certainly can't hurt. 1 Link to comment Share on other sites More sharing options...
w3schoon Posted February 15, 2013 Author Share Posted February 15, 2013 Thank you so much for sharing your programming skills! I really enjoy learning jQuery in this forum Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now