Question

我已阅读API文档，将.live（）转换为.on（），看起来很简单。但是，在我的代码中，我引用＆＃34;这个＆＃34;在使用.live（）时引用实际对象（复选框），但现在它将引用该文档。我试图改变这个＆＃34;这个＆＃34;对于实际的对象，这个＆＃34;这个＆＃34;用于在使用.live（）时引用，但是没有用。这是我如何使用它的一个例子。这是一个gridview，其中包含复选框的字段和该字段的标题单元格中的复选框。当选中标题单元格中的复选框时，它会检查该字段的正文单元格中的所有框，然后，当取消选中时，将取消选中正文单元格中的复选框。任何建议都会有所帮助。

           $("[id*=CheckAll]").live("click", function () {
            var chkHeader = $(this);
            var grid = $(this).closest("table");
            $("input[type=checkbox]:visible", grid).each(function () {
                if (chkHeader.is(":checked")) {
                    $(this).attr("checked", "checked");
                    $("td", $(this).closest("tr")).addClass("selected");
                } else {
                    $(this).removeAttr("checked");
                    $("td", $(this).closest("tr")).removeClass("selected");
                }
            });

更新了要使用的代码.on（）

        $(document).on("click", "[id*=CheckAll]", function () {
            var chkHeader = $("[id*=CheckAll]");
            var grid = $("[id*=CheckAll]").closest("table");
            $("input[type=checkbox]:visible", grid).each(function () {
                if (chkHeader.is(":checked")) {
                    $(this).attr("checked", "checked");
                    $("td", $(this).closest("tr")).addClass("selected");
                } else {
                    $(this).removeAttr("checked");
                    $("td", $(this).closest("tr")).removeClass("selected");
                }
            });

我正在考虑如何获得对CheckAll的引用与之前使用＆＃34;这个＆＃34;的不同之处。这可能是＆＃34;这个＆＃34;很聪明，只能引用当前行的复选框，当我像上面那样引用时，它不知道要引用该控件的哪个实例？

Answer 1

然而，在我的代码中，我引用＆＃34;这个＆＃34;在使用.live（）时引用实际对象（复选框），但现在它将引用该文档。

不，它不会。在$("[id*=CheckAll]").live("click", ...)和$(document).on("click", "[id*=CheckAll]", ...)的回调中，this指的是相同的内容：匹配的CheckAll元素。在委派的on处理程序中，this是委派目标的元素，而不是挂钩事件的容器元素，就像live一样。

E.g：

$("#some-container").on("click", ".some-descendant", function() {
    // Here, `this` refers to a `.some-descendant` element, not `#some-container`
});

根据您的评论：

如果我理解，那就是我原先的想法。所以，我想我正在寻找如何在该函数的后续语句中引用目标，而不是使用＆＃34;这个＆＃34;。

然后，你真的不清楚你在问什么。参考上文：

this和event.currentTarget为.some-descendant
event.target是事件发源地（.some-descendant或其后代）
event.delegateTarget是#some-container

完整示例：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <p>Click "foo" below:</p>
  <div id="some-container">
    <div>
      <div class="some-descendant">
        <div>
          <div id="foo">foo</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function() {
      "use strict";

      $("#some-container").on("click", ".some-descendant", function(event) {
        display("this: " + describe(this));
        display("event.target: " + describe(event.target));
        display("event.currentTarget: " + describe(event.currentTarget));
        display("event.delegateTarget: " + describe(event.delegateTarget));
      });

      function describe(element) {
        var name = element.tagName.toLowerCase();
        if (element.id) {
          name += "#" + element.id;
        }
        if (element.className) {
          name += "." + element.className.replace(/ /g, ".");
        }
        return name;
      }

      function display(msg) {
        var p = document.createElement('pre');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>

Answer 2

好吧，在尝试了各种各样的事情之后，似乎在所有实例中用.prop（）替换.attr（）函数已经使它按预期工作了。我想那些在那里的人会导致代码过早停止而不执行其余的语句。

建议者：user1572796在我原来的帖子下方的评论中。

谢谢大家，杰森

jQuery .live（）到.on（）引用“this”

2 个答案: