jquery - 单击链接不会触发我在 jQuery 中的脚本

Question

我有以下内容：

        <div class="controls-buttons">
            <a id="level-1" href="#">1</a>
            <a id="level-12"href="#">12</a>
        </div>

和：

$('a#level-1').click(function () {
    alert("level-1");
    // all trs with level-1 class inside abc table
    $('tr.level-1').toggle();
});

$('a#level-12').click(function () {
    alert("level 12");
    // all trs with level-1 or level-2 class inside abc table
    $('tr.level-1, tr.level-2').toggle();
});

但是，当我单击链接时，没有警报显示。我设置的方式有问题吗？

Answer 1

如果锚点是动态生成的，您应该委托点击事件，请尝试以下操作：

$(document).ready(function() {
    $('body').on('click', 'a#level-1', function () {
        alert("level-1");
        $('tr.level-1').toggle();
    });
})

Answer 2

您应该将代码放在$(document).ready(handler)中，以便在 DOM 完全加载时附加事件。

$(document).ready(function() {
  $('a#level-1').click(function () {
      alert("level-1");
      // all trs with level-1 class inside abc table
      $('tr.level-1').toggle();
  });

  $('a#level-12').click(function () {
      alert("level 12");
      // all trs with level-1 or level-2 class inside abc table
      $('tr.level-1, tr.level-2').toggle();
  });
});

演示