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，否则您将在不同时间获得不同的结果，具体取决于加载的内容和不加载的内容。

Answer 2

您的功能需要在document.ready call

中调用

$(document).ready(function() {
   textIndentFunc();
});

Answer 3

尝试以下

  $(document).ready(function () {
$('#trigger').click(function(){
    textIndentFunc();
    alert('fire');
 });
});

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);

}
textIndentFunc();

<div id="trigger">Hai</div>

Answer 4

你还有另一个也在页面加载时运行的功能吗？因为如果是这种情况，可能是2个函数存在冲突......

Answer 5

如果您已经在textIndendFunc中呼叫$(document).ready但仍未达到预期效果，请尝试将textIndentFunc移至$(window).load。

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

5 个答案: