javascript - jQuery keyup 事件没有立即执行

Question

我有以下小型 jQuery 脚本：

      $("#content").on("keyup", "#ID1", function() {
        $("#ID2").load("loadText", resizeResult());
      });

      function resizeResult() {
        if($("#ID2").height() != $("#ID3").height()){
          $("#ID3").animate({
            height: $("#ID2").height()
          }, 800);
        }
      }

我现在的问题是调整大小功能将仅由下一个“keyup”事件执行，但我希望在 ID2 中的“加载”完成后立即执行。

Answer 1

在 document.ready 中调用你的加载函数 ..

$(function(){
   $("#ID2").load("loadText", resizeResult());  //<-- call load function in document ready and in keyup function..
   $("#content").on("keyup", "#ID1", function() {
      $("#ID2").load("loadText", resizeResult());
   })
   .....
});

并请确保您的加载网址是正确的路径... loadText 似乎不是正确的路径

Answer 2

在 keyupfunction 结束时调用 resizeResult()

$("#content").on("keyup", "#ID1", function() {
       ..................

       resizeResult();
      });

Answer 3

您的代码中的一切看起来都很好。但是您需要将括号从resizeResult事件中的函数中保留下来。因为您不希望它在浏览器执行脚本时立即调用。仅在触发事件时才需要。因此，您应该将代码更改为此（以及我的本地常见事件，推荐使用 jQuery）：

$("#content").keyup(function() {
   $("#ID2").load("loadText", resizeResult);
});

function resizeResult() {
   if($("#ID2").height() != $("#ID3").height()){
      $("#ID3").animate({
         height: $("#ID2").height()
      }, 800);
   }
}

为了安全执行，最好等到 html 完全加载或加载此 html 标记（ID3容器后的 JavaScript 代码）。第一种方法可以通过使用$.document.readyjQuery 来完成。