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();
});

Answer 1

问题在这里：

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

改变它：

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

更新：请在此处查看： http ： //jsfiddle.net/mr3T3/2/

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();
    });
});

Answer 3

可能事实上事件正在解雇，你的问题就在了

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

是否正确定义了“defaultString”？

在clearDefaults（）中放入一个简单的alert（），看看事件是否有效。

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中的示例