jQuery事件未触发。

Question

我可以帮助您进行翻译。以下是需要翻译的内容：

我一直在尝试使这个工作起来。基本上，我有一个具有默认字符串（即搜索）的搜索框，当用户点击输入框时，它应该消失。

以下是代码:

HTML:

<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' value="Search <?php print $row[0]?> tweets!" autocomplete="off" />
</form>

Javascript/jQuery:（defaultString是一个全局变量，其值为文本框的值）

function clearDefault() {
var element = $('#searchBox');

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}
element.css('color','black');
}

$('#searchBox').focus(function() {
clearDefault();
});

- AlexBrand

---

你尝试过 element.val() == defaultString 和 element.val('') 吗？（这是访问表单元素值的唯一正确方式 ;)) - Felix Kling

我没有看到这两个代码片段之间有任何联系。你似乎根本没有调用clearDefault（）函数，也没有事件绑定到你的输入字段来处理它。 - András Szepesházi

@András Szepesházi，最后三行代码不是将焦点事件绑定到clearDefault()函数吗？ - AlexBrand

Answer 1

问题就在这里：

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}

请使用以下内容进行更改：

if(element.val() == defaultString) {
    element.val('value');
}

更新：在这里检查：http://jsfiddle.net/mr3T3/2/

- SadullahCeran

---

这不是问题。在不使用 val() 的情况下可以正常工作：http://jsfiddle.net/NN7w2/ （当然，你应该使用 val()，但即使这样，问题仍然存在）。 - Felix Kling

将事件放在$(function() {...});块内后，它就可以正常工作了...这有什么区别吗？ - AlexBrand

@alexBrand：任何可以在DOM元素上运行的代码都应该放在$(function() {...});中（这是$(document).ready()的简写）。这确保了DOM已经创建并且您可以在代码运行时访问元素。如果您不这样做，您的代码将在元素存在之前运行，因此您无法将事件监听器绑定到它们上面。 - Felix Kling

@alexBrand：顺便说一下，你可以将这个（你必须将它放在ready处理程序中）作为答案添加并接受自己的答案（实际上这是唯一正确的答案）。 - Felix Kling

Answer 2

问题在于事件绑定不在$(document).ready()处理程序内。 修正后：

function clearDefault() {
var element = $('#searchBox');

if(element.val() == defaultString) {
element.val("");
}
element.css('color','black');
}

$(document).ready(function() {
    $('#searchBox').focus(function() {
    clearDefault();
    });
});

- AlexBrand

---

+1 为正确的解决方案；）。但是你真的应该使用 val() 而不是 attr('value')：http://api.jquery.com/val/ - Felix Kling

Answer 3

可能事件确实正在触发，而你的问题在于

if(element.attr('value') == defaultString) {
    element.attr('value',"");
}

“defaultString”被正确定义了吗？

在clearDefaults()内放置一个简单的alert()，看看事件是否起作用。

- abolotnov

Answer 4

我认为 clearDefault 不是可重用的函数，因此不要为小代码块创建不必要的函数。请参考以下代码示例，我在您的功能中添加了一个小改进。

<form method="get" action="index.php" id="search">
<span id="searchLogo"></span>
<input type='text' name='q' id='searchBox' default="Search tweets!"  value="Search tweets!" autocomplete="off" />
</form>

$(document).ready(function() {
    $("#searchBox").focus(function(e){
        var $this = $(this);
        if($this.val() == $this.attr('default')) $this.val('');
        else if($this.val().length == 0 ) $this.val($this.attr('default'));
    });
    $("#searchBox").blur(function(e){
        var $this = $(this);
        if($this.val().length == 0 ) $this.val($this.attr('default'));
    });
});

我在代码中加入了一个default属性，用于存储默认值，并在blur事件后使用它。

请参考jsFiddler中的示例。

- Imrul