Как запустить функцию только при загрузке div?

Я хочу запустить функцию только при загрузке div.

Когда я загружаю страницу, загружается несколько файлов. В конце списка PHP перекликается с div. Когда это отображается, jQuery должен запустить функцию.

Я могу сделать это с помощью события click, но я хочу, чтобы он работал автоматически, не нажимая кнопку.

Вот как это работает с кликом:

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

Это div повторяемый PHP:

  <?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 и должен вызвать новую функцию jQuery.

Вот как я мог бы решить эту проблему, предполагая, что я правильно ее понял, в которой представление формы 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"); } }); }); 

Попробуйте ввести код javascript внутри сгенерированного кода ajax.

Например, если ваш ajax генерируется из PHP-кода

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

затем попробуйте smth, как это

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

Вы можете использовать плагин livequery

Затем вы будете использовать его следующим образом:

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

Код в функции будет выполняться, когда элемент в селекторе ( #PP_end_show ) был добавлен в DOM

Почему бы не повторить ваш 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>"; 

Это должно сработать.

В вашей JS заверните код, который вы хотите выполнить в функции. т.е.

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

На вашем PHP выпишите JS, необходимую для вызова этой функции после написания div PP_end_show. т.е.

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

Это делает то, что вы спрашиваете:

 (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 из вашего ответа.

Счастливое кодирование.

сохраните функцию jquery live-click-function, поскольку она

& запустите приведенный ниже код в php

 <?php echo "<div id=\"PP_end_show\"></div>"; echo "$(function(){ $(\"#PP_end_show\").click(); });"; ?> 
  $.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> 

Привяжите живое событие к настраиваемому событию, которое инициируется документом:

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

Рекомендации

  • jQuery API: .trigger ()
  • API JQuery: .live ()

Джейсон Брумвелл вводит правильный ответ, также вы можете использовать функцию $.when JQuery.

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

Если действие, которое вы хотите выполнить после того, как требуемые загрузки div привязаны к событию клика, просто вызовите щелчок в конце запроса ajax примерно так:

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

Эти парни правы, хотя, вы делаете все это назад

Должен ли это быть точный 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. } 

Попробуй это,

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

Используйте функцию обратного вызова. Это функция, которая будет срабатывать, как только ваше событие будет обработано. поэтому для 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 } 

И я думаю, что это должно было сделать трюк