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

如果动态生成锚点，您应该委派click事件，请尝试以下操作：

$(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();
  });
});

DEMO

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

2 个答案: