Stop alert/prompt from continuously appearing

[w3schoon]

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.

[callumacrae]

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.

[w3schoon]

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

[w3schoon]

@ 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

[dsonesuk]

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

[w3schoon]

@ 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

[thescientist]

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.

[callumacrae]

@ 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.

[w3schoon]

Thank you so much for sharing your programming skills! I really enjoy learning jQuery in this forum