Question

I have a simple html text-box hooked up to a .keypress(funcion(){...} which makes a jquery icon show up next to it whenever I press a key on the keyboard. The purpose of this is to make a jquery ui icon appear when some input is entered into the text-box so that when the icon is clicked, it saves the user’s input

It did what I want it to do… But we all know computer languages tend to be literal. Every time I press a key… A new save icon appears… EVERY TIME. Please help me, as I am stuck at this part..

P.S. For the jquery ui icon, it has a hover function to it.. when I put the icon

<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div>

inside of the .append, it disables when it appears (disables the hover, thus staying one color). If this knowledge is about you how to enable the hover when it’s coming from an append and you are willing to share, would be pretty cool.

        $(".solo1").keypress(function () {
        $("#kyo").append('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />');
    });
</script>
<div id="kyo"> <input class="solo1" /> </div>

Answer 1

You could simply create all buttons at page load, and show the appropriate button when you press a key. Then hide it again when you click the button: http://jsfiddle.net/jC7TR/1/.

$('.solo1').after('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />')
.keypress(function() {
     $(this).next('.saveButton').show();
});

$('.saveButton').hide().click(function() {
    $(this).hide();
});