13

到目前为止，我有这个工作代码：

小提琴：http: //jsfiddle.net/r4emt/12/

现在，在您进入 JQuery UI 自动完成之前，按钮显示为“Hello”。您可以在 JQuery UI 自动完成中键入“item”，您会注意到按钮现在显示“World”。单击“世界”按钮将项目放入列表中。如果您再次键入项目，您可以选择一个并单击列表中已有项目上的替换按钮。然而，一旦你这样做了，按钮仍然显示“世界”，但它应该说“你好”，因为输入字段中没有任何内容。如果您单击输入字段，然后单击删除或返回箭头，它会变回“你好”，但没有任何内容可以删除或转到左侧。我认为这与这部分代码有关：

$('#inputWrapper').on('keyup', '#tags', function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');
    }
});

特别是'keyup'部分。所以我的问题是如何解决这个问题，以便每当输入框为空时，按钮总是显示“hello”，当字段中有输入时，按钮显示“world”？谢谢！

4

7 回答 7

23

这是工作小提琴。所做的更改是：

$('#tags').keyup( function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');        
    }
});

并在您的按钮末尾单击：

$('#tags').val('');
$('#tags').keyup();
于 2013-04-22T19:49:14.193 回答
9

我知道这是一个很长的死线程，但我需要添加它，因为我刚刚花了 2 天时间来追踪内存泄漏（由我使用此页面中的代码引起的）。

重要提示：不要在按钮元素上使用 jQuerys text()！

该函数在 DOM 中创建了一些无法通过 empty() 删除的内容。如果您在很长一段时间内多次调用该函数，大量垃圾将被放入您的 DOM 中，从而导致内容中断。

请参阅jQuery API 文档。

（无法找到文档中提到的确切位置，但它就在某个地方，我现在必须为我的火车奔跑）......

于 2014-02-14T14:56:59.823 回答
1

您不能在他们单击后将文本设置回 Hello 吗？将此添加到按钮单击功能的底部：

$(this).text('Hello');

http://jsfiddle.net/r4emt/13/

于 2013-04-22T19:25:59.750 回答
1

jsFiddle 工作演示 

    $('#inputWrapper').on('keyup', '#tags', function() {
        if($(this).val() == "") {
            $('button.addButton').html('Hello1');
        } else {
            $('button.addButton').html('World');
        }
    });
于 2013-04-22T19:28:01.487 回答
0

把条件像这样

if($.trim($(this).val()) == '')

删除不需要的空格。此外，您应该在单击事件的处理程序中将按钮文本更改为“Hello”

在 click 函数的末尾添加： $(this).text('Hello');

这是代码：http: //jsfiddle.net/r4emt/34/

于 2013-04-22T19:26:34.990 回答
0

这个函数只在第一次工作，因为在它执行之后，事件监听器总是会在 keyup 之后被评估，导致输入框总是有一个值。您会注意到，一旦您单击该按钮，如果您键入内容并按退格键擦除它，它将变回 Hello。

为了达到您想要的结果，当您在清除输入框后单击按钮上的提交时，您也可以更改那里的文本。

见：http: //jsfiddle.net/r4emt/37/

我刚刚补充说：

//refreshes button name
$(this).text('Hello');

到按钮点击功能结束。

于 2013-04-22T20:09:06.947 回答
0

使用“文本”功能

       $("#inputWrapper").click(function () {
        $(this).text(function(i, v){
           return v === 'Hello' ? 'World' : 'Hello'
        })
于 2013-11-10T08:44:42.050 回答