如何僅在加載 div 時運行 function？

Question

我只想在加載 div 時運行 function 。

當我加載頁面時，會加載許多文件。 在列表的末尾，PHP 呼應了一個 div。 當顯示這個時，jQuery 應該運行 function。

我可以通過點擊事件來做到這一點，但我希望它能夠自動工作，而無需按下按鈕。

這是它通過點擊的工作方式：

$("#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>"; ?>

output 在 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>

在生成的 output 的末尾，將打印特定的 div，並應觸發新的 jQuery function。

Answer 1

這就是我解決這個問題的方法，假設我已經正確理解了提交表單 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");                       
         }
        });
});

Answer 2

嘗試將您的 javascript 代碼放入生成的 ajax 代碼中。

例如，如果您的 ajax 是從 php 代碼生成的

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

然后像這樣嘗試

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

Answer 3

您可以使用livequery 插件

然后，您將按如下方式使用它：

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

function 中的代碼將在選擇器 ( #PP_end_show ) 中的元素添加到 DOM 時執行

Answer 4

為什么不將您的 javascript 與 DIV 代碼一起回顯？

您可以使用 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>";

這應該有效。

Answer 5

在您的 JS 中，將要執行的代碼包裝在 function 中。 IE

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

在您的 PHP 中，寫出 PP_end_show div 后調用 function 所需的 JS。 IE

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

Answer 6

這可以滿足您的要求：

(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，我會在你的 output 的末尾放置一個腳本標簽，並讓它調用你的代碼作為最簡單的方法。 即使如此，您也可以使用 jQuery.load 方法（不是事件），默認情況下會從您的響應中執行 JavaScript。

快樂編碼。

Answer 7

保持 jquery 實時點擊功能不變

& 在 php 中運行以下代碼

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

Answer 8

將實時事件綁定到由文檔觸發的自定義事件：

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

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

參考

• jQuery API: .trigger()
• JQuery API：.live（）

Answer 9

    $.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>  

Answer 10

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

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

Answer 11

如果您希望在所需的 div 加載后執行的操作綁定到單擊事件，只需在 ajax 請求結束時觸發單擊，如下所示：

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

這些家伙是對的，你在做這一切都是倒着的，伙計

Answer 12

它必須是那個確切的div嗎？ 在我看來，您應該在加載文檔時執行 function 。 這樣你就知道你所有的元素都被加載了。

$(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.
}

Answer 13

嘗試這個，

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

Answer 14

使用回調 function。 它是一個 function，一旦你的事件被處理就會被觸發。 所以對於 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
}

我認為這應該可以解決問題