Question

考虑这个HTML

<div id="container">
    <ul id="someID">
    <li id="someID1">
      <div id="someID2">
        <div class="someClass">
           <label>labelText</label>     
        </div>
      </div>
    </li>
    <li>2</li>
    <li>3</li>
    </ul>
</div>

及其脚本

<script>
$(function(){
$("#container label").click(function(){
    $(this).text("labelTextChanged");
});
})
</script>

让这个代码由其他人写。现在我想将文本labelTextChanged更改为像labelTextChangedThen这样的新内容（这只是一个示例，有时我需要更改许多功能）。但现在很难从DOM中找到附加事件？在jQuery中编写代码时如何避免这些问题？

仅使用属性（自定义属性）选择元素是一种好方法吗？（如 Angularjs ）

注意：实际上可能更好或更糟。

Answer 1

编写干净（呃）代码的方法有很多种。我更喜欢从处理代码中分离我的处理程序方法（使用命名函数），使用数据属性来查询和使用event delegation。对于您的示例，代码可以重写为：

function changeLabelText(e){
    var self = $(this);
    self.text(self.attr('data-changeOnClick'));
}

$(document).on('click', '[data-changeOnClick]', changeLabelText);

<label>将变为<label data-changeOnClick="[changed text]">

在这种情况下，稍后更改标签文本就像更改html中的data-changeOnClick属性一样简单。此外，很容易将属性添加到html中的任何元素，这将触发点击处理程序。

编写单独的处理程序方法还会显示上述“可视事件2”书签中的方法。

此外，我总是在文档的末尾（在结束</body> - 标记之前）加载我的脚本，以避免必须在$(function() {/*...*/} )内包装方法分配或更多通常必须使用文档负载处理。

请参阅此jsFiddle

Answer 2

<script>
$(function(){
$("#container").on("click","label",function(){
  $(this).text("your desired text");
});
})
</script>

我认为要避免使用这些tyoe代码 visual event 2

Visual Event 是一个开源的Javascript书签，提供有关已附加到DOM元素的事件的调试信息

参考 on()

Answer 3

您始终可以使用visual event 2书签来显示附加到任何DOM元素的事件侦听器。

Answer 4

关于第二个问题。在我看来，使用Id属性来选择dom是一个很好的方法。因为对于同一级别的元素，它们不应该应用相同的Id。类过滤器适用于选择具有相同样式的一组元素。例如，您可以使用$（'div [id =“xxx”]'）使代码有意义，这意味着“id等于xxx的div”。对于第一个问题，代码不容易阅读，您可以尝试这样的$（'＃container'）。 find （'。someClass“）。children（'label'）。click （...）。也许阅读代码仍然不容易。但是对于更复杂的代码，插件的使用将帮助您使项目更具可读性和可维护性。

写干净的jQuery

4 个答案: