Question

我的表单中有这些按钮，我想将'mouseenter'和'mouseleave'事件绑定到它们这是我写的代码

$("button").each(function() {
  $(this).bind("mouseenter", function() { $(this).css("border", "1px gray outset") });
  $(this).bind("mouseleave", function() { $(this).css("border", "none") });
 });

此代码仅适用于第一个按钮，其余部分没有任何反应。这是我的完整代码：

 $("button").each(function() {
 $(this).hover(function() { $(this).css("border", "1px gray outset") }, function() {   $(this).css("border", "none") });
    $(this).bind("mousedown",$(this).css( "border", "inset"));
    $(this).click(DoSubmit($(this), 'CLICK', ''));
    });

Answer 1

直接写：

$("button").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});

JS小提琴演示：http://jsfiddle.net/tkSdW/

Answer 2

您的代码没有错误

提供它在DOM加载后运行，这意味着在

中

$(function(){
   $('button')...
});

此外，如果您只使用迭代将事件绑定到当前元素，则不必使用每个元素。

您可以使用

直接绑定到整个群组

$("button")
    .bind("mouseenter", function() { $(this).css("border", "1px gray outset") })
    .bind("mouseleave", function() { $(this).css("border", "none") });

Answer 3

无需在each()循环中分配事件处理程序。单独的选择器将返回一个元素数组，然后jQuery将事件应用于这些元素：

$(function() {
    $("button").bind("mouseenter", function() { $(this).css("border", "1px gray outset") });
    $("button").bind("mouseleave", function() { $(this).css("border", "none") });
});

Example fiddle

Answer 4

虽然原始代码is working just fine不是原样，但我建议您使用.hover()方法，该方法完全相同但代码较少：

$("button").hover(function() {
    $(this).css("border", "1px gray outset");
}, function() {
    $(this).css("border", "none");
});

Live test case。

Answer 5

你可能想要这个

$("button").each(function(index,value) {
   $(value).bind("mouseenter", function() { $(value).css("border", "1px gray outset"); });
   $(value).bind("mouseleave", function() { $(value).css("border", "none"); });
});

Jquery- .each（）不起作用

5 个答案: