如何僅在div加載時才運行函數？

當我加載頁面時，會加載一些文件。在列表的最後，PHP回顯了一個div。當顯示這一個時，jQuery應該運行一個函數。

我可以用點擊事件做到這一點，但我希望它自動工作，無需按下按鈕。

這是它的工作原理與點擊：

$("#PP_end_show").live("click",function(){ 
    $("#PP_head_bar").slideToggle("slow"); 
    $("#PP_info_file_wrap").slideUp("slow"); 
});

這是PHP呼應div：

<?php echo "<div id=\"PP_end_show\"></div>"; ?>

AJAX調用後生成的輸出：

<form id="PP_search_input" method="post" name="search_ID" ONSubmit="xmlhttpPost('PP_search_stream_client.php', 'PP_search_input', 'PP_thumb_output', '<img src=\'images/wait.gif\'>');return false; "> 
     <input name="search_string" type="text" class="PP_input" id="search_string" value="<?php echo $_POST['search_string']; ?>"/> 
     <button type="submit" class="PP_submit" id="search_submit"> search </button>

在生成的輸出結束時，特定的div將被打印並且應該觸發新的jQuer y功能。

來源

2011-06-05 Joost

你能編輯php代碼嗎？ – bozdoz 2012-01-06 13:07:03

只是爲了清楚。你加載一個頁面。同時你也做了一個ajax請求，當請求完成後，你想要一個js函數被觸發？你的代碼太落後了。 – OptimusCrime 2012-01-06 14:45:16

太棒了，像這樣的賞金。但在我看來，這個OP是爲了解釋爲什麼下面的任何一個ansers不會爲他工作。另外，我想知道過去半年中取得的進展。 – GolezTrol 2012-01-07 23:13:27

它是否必須是精確的div？在我看來，你應該只是在文件加載時執行該功能。這樣你就知道你的所有元素都被加載了。

$(function() 
{ 
    // This function is executed when the DOM is ready, including that last div. 
    // Could be that images are still loading, but your code usually won't depend on that. 
}

來源

2011-06-05 11:33:04 GolezTrol

是的，它必須是精確的分區... – Joost 2011-06-05 11:54:21

只要所有的HTML被加載，就會立即調用此事件，這將在加載最後一個div後立即生效。你可以在div中插入一行javascript *。這行立即執行，並且div將可用，因爲它在HTML代碼中的腳本之上。但是召喚的時刻將會有不可估量的時間。我真的建議使用文檔就緒事件處理程序，如我的答案中所示。 – GolezTrol 2011-06-05 12:03:28

-4

使用回調函數。它的一個函數將在您的事件處理後立即觸發。這樣的jQuery：

$("#PP_end_show").live("click",function(){ 

    $("#PP_head_bar").slideToggle("slow"); 
    $("#PP_info_file_wrap").slideUp("slow"); 

}, myCallback()); 

function myCallback(){ 
//Do what ever you want to happen after 
//the div creationin this function 
}

而且我覺得應該做的伎倆

來源

2012-01-06 14:24:46

它應該自動啓動，而不是點擊。 – 2012-01-12 19:22:47

您可以使用livequery plugin

如下你可以這樣使用它：

$('#PP_end_show').livequery(function(){ 
    $("#PP_head_bar").slideToggle("slow"); 
    $("#PP_info_file_wrap").slideUp("slow"); 
});

代碼在選擇器中的元素（#PP_end_show）被添加到DOM

來源

2012-01-06 14:37:55 ManseUK

爲什麼downvote？ – ManseUK 2012-01-07 11:05:32

我沒有讓你失望，但是從jQuery 1.7開始，你不再需要插件了。你可以使用.live（）。請參閱http://api.jquery.com/live/ – Bas 2012-01-09 13:02:10

以及您會建議使用哪個事件來加載DOM元素？！？！ – ManseUK 2012-01-09 13:08:08

在你的JS中，將你想要執行的代碼包裝在一個函數中。即

function showInfoBlock() { 
    $("#PP_head_bar").slideToggle("slow"); 
    $("#PP_info_file_wrap").slideUp("slow"); 
}

在你的PHP中，寫出需要在寫出PP_end_show div後調用該函數的JS。即

<?php echo "<div id=\"PP_end_show\"></div><script>$(function() { showInfoBlock(); })();</script>"; ?>

來源

2012-01-08 14:13:25 techfoobar

這是我會怎麼解決這個問題，假設我理解正確的話，其中的提交表單PP_search_input的，返回所需的HTML，其中則JavaScript代碼應執行。

$('#PP_search_input').submit(function() { 
    $.ajax({ 
     url: 'PP_search_stream_client.php', 
     type: 'post', 
     data: $(this).serialize(), 
     success: function(html) { 
      $(html).insertAfter('#whereToInsert') //change to however you want to insert the html 
        .find("#PP_head_bar").slideToggle("slow").end() 
        .find("#PP_info_file_wrap").slideUp("slow");      
     } 
     }); 
});

來源

2012-01-08 20:05:21

這確實你問：

(function($){ 
    var checkForEndInterval = window.setInterval(function(){ 
     if ($('#PP_end_show').length) { 
      // stop interval 
      window.clearInterval(checkForEndInvertal); 
      // call your code now 
      $("#PP_head_bar").slideToggle("slow"); 
      $("#PP_info_file_wrap").slideUp("slow"); 
     } 
    },200); 
})(jQuery);

然而，這不是一個好主意，因爲它的愚蠢和你問的你不理解的提示，但是這就是爲什麼你在這裏。既然你已經知道你的AJAX何時被調用，明確地調用它並附加一個成功處理程序。

$.ajax({ 
    /* your other setup code here */ 
    success : function(data) { 
     // run your code 
    } 
});

如果你不這樣做AJAX就像你說的，我會把一個腳本標籤在你的輸出端，並有它調用你的代碼最簡單的方法。即使如此，您仍然可以使用jQuery.load方法（不是事件），默認情況下，您的響應會執行JavaScript。

快樂編碼。

來源

2012-01-09 02:13:36

Jason Brumwell輸入正確答案，也可以使用JQuery的$.when函數。

http://api.jquery.com/jQuery.when/

來源

2012-01-09 08:40:37

嘗試把你的JavaScript代碼生成的Ajax代碼內。

例如，如果從PHP代碼

<?php echo "<div id=\"PP_end_show\"></div>"; ?>

產生你的Ajax然後嘗試這樣

<?php 
    echo "<div id=\"PP_end_show\"></div>"; 
    echo '$(function(){$("#PP_head_bar").slideToggle("slow");'; 
    echo '$("#PP_info_file_wrap").slideUp("slow");});'; 
?>

來源

2012-01-10 10:56:15 alex

爲什麼不能用DIV代碼一起附和你的JavaScript不便？

您可以使用PHP來呼應的Javascript這樣的：

您的代碼後：

<?php echo "<div id=\"PP_end_show\"></div>"; ?>

這樣寫：

echo "<script type='text/javascript'> 

$('#PP_head_bar').slideToggle('slow'); 
$('#PP_info_file_wrap').slideUp('slow'); 


"; 
echo "</script>";

這應該工作。

來源

2012-01-11 08:10:56 ssdesign

我在你的前一天給出了同樣的答案......並且你得到了更多的選票......奇怪的 – alex 2012-01-13 02:35:20

保持這種jQuery的生活點擊功能，因爲它是

&在PHP運行下面的代碼

<?php 
echo "<div id=\"PP_end_show\"></div>"; 
echo "$(function(){ $(\"#PP_end_show\").click(); });"; 
?>

來源

2012-01-11 11:37:37

綁定活動當天現場由文件觸發的自定義事件：

$(document).trigger('echo'); 

$("#PP_end_show").live("echo", function(){ 
    $("#PP_head_bar").slideToggle("slow"); 
    $("#PP_info_file_wrap").slideUp("slow"); 
    });

參考

來源

2012-01-11 19:33:29

$.ready(function(){ 
    $("#wrapper").add("div").attr('id','PP_end_show'); 

      $("#PP_head_bar").slideToggle("slow"); 
      $("#PP_info_file_wrap").slideUp("slow");  

}); 


<div id='wrapper'> 

</div>

來源

2012-01-11 22:31:04 chenio

如果你想一次所需的div負載執行的動作被綁定到點擊事件，只需觸發點擊的Ajax請求類似的結尾：

$.ajax({ 
    url:'whatever.php', 
    type:'post', //guessing obviously 
    success: function(data){ 
    $('#PP_end_show').click(); //etc 
    } 
});

這些傢伙雖然正確，你正在做的這一切倒退交配

來源

2012-01-12 21:28:51 Umut

試試這個，

if(window.isBodyLoaded){ 
    try{ 
     $("#PP_head_bar").slideToggle("slow"); 
     $("#PP_info_file_wrap").slideUp("slow"); 
    }catch(d){ 
     alert(d) 
    } 
}

來源

2012-01-13 04:48:03 Avinash

如何僅在div加載時才運行函數？

回答

相關問題