Question

以下是有关更改事件处理程序的代码，

<style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
</style>

<body>

    <input id="check1" type="checkbox" xyz="abc">
    <label for="check1">Check me</label>
    <p></p>

    <script>
    $( "input" )
        .change(function() {
        var $input = $( this );
        $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr("checked") + "</b><br>" +
                            ".attr( 'xyz' ): <b>" + $input.attr("xyz") + "</b><br>"  +
            ".prop( 'checked' ): <b>" + $input.prop("checked") + "</b><br>" +
            ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
        })
        .change();
    </script>

</body>

观察是，change事件处理函数在加载脚本时立即执行。

但是，从左到右评估调用表达式。因此，只有在.change()成功执行后才能调用$('input').change(handler)。

那么，如何调用.change()调用表达式而不执行$('input').change(handler)？

Answer 1

不确定这里的问题是什么。它完全符合您的要求。它设置一个change事件处理程序，然后立即调用它。可能有很多理由要做到这一点，没有上下文就无法分辨。

最后的.change()确实只是调用模拟事件并调用处理程序。

jQuery调用往往返回其关联对象，以便可以使用方法链接。上面的代码等同于以下内容：

$( "input" ).change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr("checked") + "</b><br>" +
                        ".attr( 'xyz' ): <b>" + $input.attr("xyz") + "</b><br>"  +
        ".prop( 'checked' ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
    });

$("input").change();

因为它按照你所说的从左到右的顺序进行评估，并且.change(function(). . . )调用返回通过$("input")获取的jQuery集合，所以可以进行方法链接。

您可以使用基本上任何jQuery对象

来执行此操作

$("p").css({color:"red"}).text("error").show()

是一个类似的代码，它使用jQuery的方法链接。

Answer 2

$(document).ready(function() {
  $("input").change(function() {
    var $input = $(this);
    $("p").html(".attr( 'checked' ): <b>" + $input.attr("checked") + "</b><br>" +
      ".attr( 'xyz' ): <b>" + $input.attr("xyz") + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop("checked") + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is(":checked") + "</b>");
  });
})

您应该使用$(document).ready( function() {...} )。这样，函数内的所有代码仅在文档准备好（已加载）

后执行

在jQuery中更改事件处理程序

2 个答案: