Question

代码的第一部分非常完美，包括：id上的mouseover，mouseout和click事件，称为#active-to-do-list-28。但是当点击事件更改属性值时，它不会对名为#inactive-to-do-list-28的id做出反应。

代码：

<script>
$(document).ready(function(){
  $("#active-to-do-list-28").mouseover(function(){
    $("#active-to-do-number-28").attr("class", "label label-info");
  });
  $("#active-to-do-list-28").mouseout(function(){
    $("#active-to-do-number-28").attr("class", "label label-default");
  });
  $("#active-to-do-list-28").click(function(){
    $("#active-to-do-list-28").attr("class","list-group-item list-group-item-info");
    $("#active-to-do-list-28").attr("id", "inactive-to-do-list-28");
    $("#active-to-do-number-28").attr("class", "label label-info");
    $("#active-to-do-number-28").attr("id", "inactive-to-do-number-28");
  });
  $("#inactive-to-do-list-28").click(function(){
    $("#inactive-to-do-list-28").attr("class", "list-group-item");
    $("#inactive-to-do-list-28").attr("id", "active-to-do-list-28");
    $("#inactive-to-do-number-28").attr("class", "label label-default");
    $("#inactive-to-do-number-28").attr("id", "active-to-do-number-28");
  });
});
</script>

有人可以帮我解决这个问题吗？

Answer 1

当您更改ID时，新ID的事件处理程序将不会触发（因为在您尝试在其上注册事件时它们不存在）。如果必须使用此样式的代码，请使用委派的事件处理程序：

e.g。像：

  $(document).on('mouseover', "#active-to-do-list-28", function(){
    $("#active-to-do-number-28").attr("class", "label label-info");
  });

当然这可以缩短，因为第二个选择器是相同的元素：

  $(document).on('mouseover', "#active-to-do-list-28", function(){
    $(this).attr("class", "label label-info");
  });

通过监听指定的事件来冒泡到不变的祖先。如果没有什么比较接近，那么document是默认值。然后在事件时应用jQuery选择器，因此在注册事件时对象是否不存在并不重要。

我建议您永远不要更改ID，而是改为其他类。

请注意，您的大部分代码都可以大大简化，但如果您提供了HTML示例，也会有所帮助。

更新：

在mouseenter事件中更改元素的目标存在固有问题。在某些浏览器中，它可能会或可能不会立即生成mouseleave事件，因为您实际上是从光标下拉出地毯！
整个问题似乎是在悬停时切换显示，并在点击时切换选择。见下文：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/86pv4j51/

如果是这样，基于类的解决方案将执行以下操作：

$(document).ready(function () {
    $('.list-group').on('mouseenter', '.list-group-item', function () {
        $(this).addClass("hover");
    }).on('mouseleave', '.list-group-item', function () {
        $(this).removeClass("hover");
    }).on('click', '.list-group-item', function(){
        $(this).toggleClass("active");
    });
});

注意： 我将它们留作委托事件，但如果这些项目是非动态的，您可以使用普通的事件处理程序。

Answer 2

jquery .click事件是在页面加载时生成的，因此所有带有#inactive-to-do-list-28的id都会受到影响，但如果你添加带有此id的元素或更改带有此id的元素，如果你想要它就不会有事件你应该这样做你的活动：

$(document).on('click','#inactive-to-do-list-28', function(){});

注意：文档不是最佳选择器，您应该使用更接近的元素。有关jquery .on()的更多信息在这里：http://api.jquery.com/on/

Answer 3

非常感谢大家。它有所帮助。

现在，正如@TrueBlueAussie注意到的那样，我的代码可能会简单得多，但我不知道哪种优化和简单最好。

这是我的HTML：

    <ul class="list-group" align="left"><li class="list-group-item" id="active-to-do-list-1" style="padding-bottom: 14px; line-height: 20px;"><span style="margin-right: 12px;"><span class="label label-default" id="active-to-do-number-1">1</span></span>Task1
                <div class="text-right" style="float: right;">
                    <a href="#deleteTodoDialog" class="open-DeleteTodo btn btn-danger" data-toggle="modal" data-id="1" style="height: 26px; padding-top: 4px; padding-bottom: 2px; margin-right: 5px; width: 40px;"><span class="glyphicon glyphicon-minus-sign"></span></a>
                    <a href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-id='{"id":1,"todo":"task1)"}' style="height: 26px; padding-top: 4px; padding-bottom: 2px; margin-right: 5px; width: 40px;"><span class="glyphicon glyphicon-edit"></span></a>
                    <a href="#doneTodoDialog" class="open-DoneTodo btn btn-success" data-toggle="modal" data-id="1" style="height: 26px; padding-top: 4px; padding-bottom: 2px; margin-right: 5px; width: 40px;"><span class="glyphicon glyphicon-ok-sign"></span></a>
                </div>
    </ul>

你会推荐什么？

Answer 4

当你声明一个jQuery事件处理程序时，它将遍历页面并查找与给定选择器匹配的所有元素并将处理程序附加到它。在这种情况下，您的代码位于document.ready块中，因此在页面加载时运行一次。如果您之后更改ID或创建新元素，则这些元素都不会绑定到已声明的处理程序。

解决此问题的快速方法是在更改ID时重新绑定事件处理程序。例如：

将document.ready中的所有代码放在函数中，然后每当您执行更改元素的ID或类的操作时，再次调用此函数。

function eventsBinder(){
  $("#active-to-do-list-28").mouseover(function(){
    $("#active-to-do-number-28").attr("class", "label label-info");
  });
  $("#active-to-do-list-28").mouseout(function(){
    $("#active-to-do-number-28").attr("class", "label label-default");
  });
  $("#active-to-do-list-28").click(function(){
    $("#active-to-do-list-28").attr("class","list-group-item list-group-item-info");
    $("#active-to-do-list-28").attr("id", "inactive-to-do-list-28");
    $("#active-to-do-number-28").attr("class", "label label-info");
    $("#active-to-do-number-28").attr("id", "inactive-to-do-number-28");
    eventsBinder();
  });
  $("#inactive-to-do-list-28").click(function(){
    $("#inactive-to-do-list-28").attr("class", "list-group-item");
    $("#inactive-to-do-list-28").attr("id", "active-to-do-list-28");
    $("#inactive-to-do-number-28").attr("class", "label label-default");
    $("#inactive-to-do-number-28").attr("id", "active-to-do-number-28");
    eventsBinder();
 });
}

然后我们在文档就绪事件

上调用此函数

$(document).ready(function(){
  eventsBinder();
})

这应该可以解决问题。理想情况下，您希望在附加新元素之前将先前绑定的事件移除到这些元素，以避免它们被调用两次;但在这种特殊情况下，它不会造成任何麻烦（除了可能增加几毫秒的处理）。

希望它有所帮助。

不通过jQuery更改HTML的属性值

4 个答案: