Jquery-.each（）不'；行不通

我的表单中有这些按钮，我想将“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', ''));
    });

直接写：

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

---

JS Fiddle Demo:

无需在

each（）

循环中分配事件处理程序。选择器本身将返回一个元素数组，然后jQuery将事件应用于这些元素：

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

---

您的代码没有问题

如果它是在加载DOM后运行的，则意味着

---

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

您可以使用直接绑定到整个组

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

虽然您的原始代码保持原样，但我建议您使用

.hover（）

方法，该方法的功能完全相同，但代码更少：

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

。

---

​

你可能想要这个

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

---

您发布的代码没有问题（）。尝试设置一个演示，显示您遇到的问题。（在Firefox上）。这个脚本是否包含在第一个按钮之后，但可能在其他按钮之前？或者，在执行此函数后，是否使用Ajax加载其他按钮？这个代码本身没有什么问题。这相当于他正在使用的代码。。。它不会解决任何问题。@RoryMcCrossan:如果我遗漏了什么，我表示歉意，但是@Rory:代码是等效的。OP的原始代码有效（如Matt所示）。因此，如果它对OP不起作用，这也不应该。这并不意味着它不应该这样写（应该这样写），但它不会是OP问题的解决方案（如果有问题的话）。在我看来，我们必须等到他澄清……你是对的，马特道歉。但是，在

each（）

中作为OP分配处理程序仍然是不好的做法。

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