如何仅在 div 加载时运行函数？

发布于 2024-11-14 00:05:38 字数 1007 浏览 1 评论 0原文

我只想在加载 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 并且应该触发新的 jQuery 函数。

原文

I want to run a function only when a div gets loaded.

When I load the page, a number of files are loaded. At the end of the list, PHP echoes a div. When this one is displayed, jQuery should run a function.

I can do this with a click-event, but I want it to work automatically, without pushing a button.

This is how it works with a click:

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

This is the div echoed by PHP:

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

The output is generated after an AJAX call:

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

at the end of the generated output the specific div will be printed and should trigger the new jQuery function.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柏拉图鍀咏恒 2024-11-21 00:05:38

这就是我解决这个问题的方法，假设我已经正确理解了它，其中提交表单 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");                       
         }
        });
});

This is how I would tackle this issue, assuming I've understood it correctly in which the submission of the form PP_search_input, returns the html needed, in which then a the javascript code should be executed.

$('#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");                       
         }
        });
});

回复收藏 0 原文

稍尽春風 2024-11-21 00:05:38

尝试将您的 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");});'; 
?>

Try putting your javascript code inside the generated ajax code.

For example if your ajax is generated from the php code

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

then try smth like this

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

回复收藏 0 原文

猫七 2024-11-21 00:05:38

您可以使用 livequery 插件

然后按如下方式使用它：

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

函数中的代码将执行当选择器中的元素 (#PP_end_show) 添加到 DOM 时

You could use the livequery plugin

You would then use it as follows :

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

The code in the function would execute when the element in the selector (#PP_end_show) was added to the DOM

回复收藏 0 原文

匿名的好友 2024-11-21 00:05:38

为什么不将您的 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>";

这应该可以工作。

Why not echo your javascript along with the DIV code?

You can use PHP to echo Javascript like this:

After your code:

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

Write this:

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

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


";
echo "</script>";

This should work.

回复收藏 0 原文

半城柳色半声笛 2024-11-21 00:05:38

在 JS 中，将要执行的代码包装在函数中。即

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

在你的PHP中，写出PP_end_show div后调用该函数所需的JS。 IE

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

In your JS, wrap the code you want to execute in a function. i.e.

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

In your PHP, write out the JS needed to call that function after writing out the PP_end_show div. i.e.

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

回复收藏 0 原文

凉月流沐 2024-11-21 00:05:38

这就是你所要求的：

(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。

快乐编码。

This does what you are asking:

(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);

However this is not a good idea because its silly and what you are asking for hints you not understanding but that is why you are here. Since you already know when your AJAX is called, call it explicitly and attach a success handler to it.

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

If you were not doing AJAX as you say, I would put a script tag at the end of your output and have it call your code as the simplest approach. Even still, you could use the jQuery.load method (not event) which by default executes JavaScript from your response.

Happy coding.

回复收藏 0 原文

半衾梦 2024-11-21 00:05:38

保持 jquery live-click-function 不变

&在php中运行以下代码

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

keep that jquery live-click-function as it is

& run the below code in php

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

回复收藏 0 原文

日记撕了你也走了 2024-11-21 00:05:38

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

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

回复收藏 0 原文

寂寞笑我太脆弱 2024-11-21 00:05:38

将实时事件绑定到由文档触发的自定义事件：

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

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

参考

Bind the live event to a custom event that is triggered by the document:

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

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

References

回复收藏 0 原文

欢你一世 2024-11-21 00:05:38

Jason Brumwell输入正确答案，也可以使用JQuery的$.when函数。

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

回复收藏 0 原文

寄离 2024-11-21 00:05:38

如果您想要在所需的 div 加载后执行的操作绑定到单击事件，只需在 ajax 请求末尾触发单击即可，例如：

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

这些人是对的，您正在向后执行这一切，伙计

If the action you want to perform once the desired div loads is bound to a click event, simply trigger click at the end of the ajax request something like:

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

These guys are right though, you are doing this all backwards mate

回复收藏 0 原文

﹂绝世的画 2024-11-21 00:05:38

它必须是那个精确的 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.
}

Does it have to be that exact div? It seems to me that you should just execute the function on load of the document. That way you know all your elements are loaded.

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

回复收藏 0 原文

〗斷ホ乔殘χμё〖 2024-11-21 00:05:38

试试这个，

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

Try this,

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

回复收藏 0 原文

Bonjour°[大白 2024-11-21 00:05:38

使用回调函数。
它是一个在处理事件后立即触发的函数。
所以对于 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
}

我认为这应该可以解决问题

Use a callback function.
Its a function that will be triggered as soon as your event is handled.
so for 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
}

And I think that should do the trick

回复收藏 0 原文

~没有更多了~