jQuery - 函数在 div 单击时运行正常，但在页面加载时运行正常

Question

我有以下函数，我想在页面加载时运行它，并在您单击 div#trigger 时重新运行。当您单击 div#trigger 时，一切都很好。然而，在页面加载时，代码有时似乎可以工作，但有时缩进量错误，并且警报(我只是出于调试目的而将其放在那里)永远不会触发。谢谢

  function textIndentFunc () {

     textString = $('#from-1 :selected').text();

     $('#hidden').text(textString);

     textWidth = $('#hidden').width();

     inputWidth = $('#from-1 select').width();

     indentMy = (inputWidth / 2) - (textWidth / 2);

    $('#from-1').css('text-indent',indentMy);

}

 $('#trigger').click(function(){
    textIndentFunc();
    alert('fire');
 });

textIndentFunc();

更新 - 我应该提到此代码在 document.ready 上运行。

更新 - 将代码移至 window.load 不会改变任何内容。

Answer 1

将函数调用包装在 document.ready 处理程序中，如下所示...

$(function() {
    textIndentFunc();
});

这可以确保在尝试执行任何操作之前先加载 DOM，否则您会在不同时间得到不同的结果，具体取决于加载的内容和未加载的内容。