Javascript .附加问题。限制。追加

Javascript .附加问题。限制。追加,javascript,jquery,button,keypress,Javascript,Jquery,Button,Keypress,我有一个简单的html文本框,它连接到一个.keypress(function(){…},每当我按下键盘上的一个键时,它就会在旁边显示一个jquery图标。其目的是在文本框中输入某些输入时显示一个jquery ui图标,以便在单击图标时保存用户的输入 它做了我想要它做的…但我们都知道计算机语言往往是文字。每次我按一个键…一个新的保存图标出现…每次。请帮助我,因为我被困在这一部分 另外,对于jquery ui图标,它有一个悬停功能。当我放置图标时 在.append内部,当它出现时会禁用(禁用悬停

我有一个简单的html文本框,它连接到一个
.keypress(function(){…}
,每当我按下键盘上的一个键时,它就会在旁边显示一个jquery图标。其目的是在文本框中输入某些输入时显示一个jquery ui图标,以便在单击图标时保存用户的输入

它做了我想要它做的…但我们都知道计算机语言往往是文字。每次我按一个键…一个新的保存图标出现…每次。请帮助我,因为我被困在这一部分

另外,对于jquery ui图标,它有一个悬停功能。当我放置图标时

.append
内部,当它出现时会禁用(禁用悬停,从而保持一种颜色)。如果这项知识是关于当悬停来自append并且您愿意共享时如何启用悬停,那将非常酷

        $(".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>
$(“.solo1”).keypress(函数(){
$(“#kyo”).append(“
”); });
而不是按
可以使用
.blur()吗
要让图标在他们离开文本框后显示?

您有几个不同的选项。首先,在按键上添加按钮似乎有点太频繁了。您可能希望在另一个事件上添加按钮,例如
。更改
。模糊
。也就是说,对于您当前的代码,您只需要要做的是检查按钮是否已经存在,如果没有,则追加它

$kyo = $("#kyo");  
if( $kyo.find('.saveButton').length === 0 ) // if button doesn't exist
    $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 />');
$kyo=$(“#kyo”);
if($kyo.find('.saveButton').length==0)//如果按钮不存在
$kyo.append(“
”);
您只需在页面加载时创建所有按钮,并在按键时显示相应的按钮。然后在单击按钮时再次隐藏该按钮:

$('.solo1')。在('
'之后 .按键(功能(){ $(this.next('.saveButton').show(); }); $('.saveButton')。隐藏()。单击(函数(){ $(this.hide(); });
不要添加它,而是检查它是否已经存在?这有什么困难?如果我理解正确,您可能希望在页面加载时附加一次,并且只在
按键功能中显示相应的元素。是的,正确..在用户在文本框中输入内容时,给用户保存选项..而不是p每次按一个键时都要显示一个保存按钮。你也可以有一个标志变量,每次都要检查/更新它,这样你就知道是否需要添加图标。并添加一个模糊处理程序,这样当焦点消失时你就可以隐藏图标。这就像处理业务的方式一样,但它仍然有相同的问题。每次单击时,它都会添加一个保存按钮太棒了!这正是我所需要的。非常感谢!您还通知了我JSFIDLE。多么整洁的网站。再次感谢!
:D
$('.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();
});