2011-12-27 88 views
0

我有一个简单的html文本框,它连接到一个.keypress(funcion(){...},每当我按下键盘上的某个按键时,就会在其旁边显示一个jQuery图标。这样做的目的是当在文本框中输入一些输入时使jquery ui图标出现,这样当单击图标时,它将保存用户的输入.append问题。限制.append

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

P.S.对于jQuery UI的图标,它有一个悬停功能,它..当我把图标

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

.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> 
+0

而不是添加它,检查并看看它是否已经在那里?这有什么困难? – Hogan

+0

如果我理解正确,您可能需要在页面加载,并且只能*显示* keypress函数中的相应元素。 – pimvdb

+0

是的,正确的。当用户在文本框中输入内容时,给用户一个保存选项。每次按下按键时不要附加保存按钮 –

回答

1

您可以在页面加载时简单地创建所有按钮,并在按下按钮时显示相应的按钮。然后单击按钮时再次隐藏它: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(); 
}); 
+0

太棒了!这正是我所需要的。非常感谢!你还通知我jsfiddle。多么整洁的网站。再次感谢! ':D' –

0

而是对keypress你可以使用.blur()有他们单击从文本框离开后的图标?

+0

我喜欢这种关于业务的方式,但它仍然存在相同的问题。每次单击文本框时它都会添加一个保存按钮 –

1

您有几个不同的选项。首先,在按键上添加按钮似乎有点过于频繁。您可能想要在另一个事件上添加按钮,例如.change.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 />');