javascript - 将事件绑定(bind)到类名会导致 Jquery 代码脆弱

Question

免责声明:我确信有人问过这些问题，但我想不出准确的谷歌关键词来定位类似的问题。所以请耐心等待。

问题:由于以下模式，我经常需要重写大量 JQuery 代码:

<div class = 'foo'></div>

<script>
    $('.foo').on('click', function(){
       // Do something
    });
</script>

这段代码的问题是它太脆弱了。如果我决定重命名我的类以更改 DOM 的结构，则与将处理程序绑定(bind)到 DOM 元素相关的全部 JS 都将受到编辑。

使 JQuery 代码不易出现此类风险或理想情况下完全消除此类风险的最佳实践是什么？

Answer 1

我发现根据正在发生的事件添加要绑定(bind)的类比定义结构或组件的类更容易。

例如:

<button class="foo js-add-user">Add User</button>

<script>
  $('.js-add-user').on('click', function() {
    //..
  });
</script>

这样，如果您想更改 .foo，则无需扰乱处理程序。