Question

我不明白为什么check()函数不想触发，我知道如果我将此函数设置为setInterval(check, 1000)或函数$("#btn-click")它会起作用，但为什么它现在不起作用？如果你解释我，我将不胜感激

$(function() {
  $("#field").on("keyup", function() {
    var x = $(this).val();
    $("#outcome").text(x);
  });

  $("#btn-save").click(function() {
    var name = $("#outcome").text();
    var x = $("table tbody").append("<tr><td>" + name + "</td></tr>")
    $("#field").val("");
    $("#outcome").text("");
  });

  check();

  function check() {
    if ($("table tbody").has("tr")) {
      $("table tbody tr td").on("click", function(e) {
        var tar = $(e.target);
        var b = $(this);
        if (tar.is(b)) {
          b.css("color", "red");
        }
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input type='text' id='field'>
  <p>The result is: <span id="outcome"></span></p>
  <span id="btn-save" class="btn-save">save</span>
  <table>
    <thead>
      <tr>
        <th>Names</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>

Answer 1

该函数触发，但没有td元素将事件附加到。

如果要将事件绑定到将动态生成的元素，则不需要检查功能，只需使用$(body').on(evtType,selector,handler)

查看下面的示例。你动态添加的每个td仍将被绑定到事件监听器，因为它附加到'body'。

$(function() {
  $("#field").on("keyup", function() {
    var x = $(this).val();
    $("#outcome").text(x);
  });

  $("#btn-save").click(function() {
    var name = $("#outcome").text();
    var x = $("table tbody").append("<tr><td>" + name + "</td></tr>")
    $("#field").val("");
    $("#outcome").text("");
  });

  check();

  function check() {
      console.log('firing')
  }

  $('body').on('click', 'table tbody tr td', function(e) {
    var tar = $(e.target);
    var b = $(this);
    if (tar.is(b)) {
      b.css("color", "red");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <input type='text' id='field'>
  <p>The result is: <span id="outcome"></span>
  </p>
  <span id="btn-save" class="btn-save">save</span>
  <table>
    <thead>
      <tr>
        <th>Names</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>

Answer 2

check()正在解雇。它只是没有做任何事情，因为你的if逻辑错误的选择器指向你没有的元素（tbody，td）。

在您点击td之后，您不会在表格中获得btn-save元素，因为click事件处理程序会创建td元素。您的代码希望在单击该按钮之前运行check。

我已删除对tbody的引用，并将您的td引用更改为th，现在它可以正常运行：

＆＃13;

$(function() {
    $("#field").on("keyup", function() {
        var x = $(this).val();
        $("#outcome").text(x);
    });

    $("#btn-save").click(function() {
        var name = $("#outcome").text();
        var x = $("table tbody").append("<tr><td>" +name+"</td></tr>")
        $("#field").val("");
        $("#outcome").text("");
    });

    check();
    function check() {
      console.log("HELLO FROM CHECK!");
        if ($("table").has("tr")) {
            $("table tr th").on("click", function(e) {
                var tar = $(e.target);
                var b = $(this);
                if (tar.is(b)) {
                    b.css("color", "red");
                }
            });
        }
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field'>
        <p>The result is: <span id="outcome"></span></p>
        <span id="btn-save" class="btn-save">save</span>
        <table>
            <thead>
                <tr>
                    <th>Names</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

＆＃13;

功能不想开火

2 个答案: