Question

我正在尝试实施，我认为这是一个简单的click，load，slideDown方案。但是我无法显示slideDown部分。

我有以下两个按钮：

<div>
    <fieldset id="btn">
        <input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db1" data-id=1" VALUE="DB1"/></br>
        <input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db2" data-id="2" VALUE="DB2"/></br>
    </fieldset>
</div>

然后我有以下jQuery：

$(document).ready(function()
    {
        $('.databasebtn').on('click',function()
            {
                $(this).append("<div id='btnlist'></div>");
                $('#btnlist').slideDown("200",function()
                    {
                        $('#btnlist').load("test78b.php");
                    }); 
            })
    });

我想点击按钮，我将#btnlist div附加到按钮，并使用test78b.php的内容填充新div，这将生成一个复选框列表。

一切正常，但我看不到复选框。如果我在后台查看代码，它就在那里，它就不会出现了。

如果我单独包含'test78b.php'，它会按预期显示。

我有什么遗失的吗？

Answer 1

您不能将div附加到按钮，您可以使用此代码将div附加到父级fildset

<script type="text/javascript">
$(document).ready(function()  {
        $('.databasebtn').on('click',function(){
                $(this).parent().append("<div id='btnlist'></div>");
                $('#btnlist').slideDown('slow',function(){
                        $('#btnlist').load("your page");
                    })
           })  
  });
 </script>

或者您可以使用insertBefore在使用此代码点击之前附加div

<script type="text/javascript">
$(document).ready(function()  {
        $('.databasebtn').on('click',function(){
               $("<div id='btnlist'></div>").insertBefore($(this))
                $('#btnlist').slideDown('slow',function(){
                        $('#btnlist').load("your page");
                    })
           })  
  });
 </script>

或使用其他代码将div附加到body标记

<script type="text/javascript">
$(document).ready(function()  {
        $('.databasebtn').on('click',function(){
               $("<div id='btnlist'></div>").appendTo('body')
                $('#btnlist').slideDown('slow',function(){
                        $('#btnlist').load("your page");
                    })
           })  
  });
 </script>

然后，对于正确的html代码，您不应该在同一页面上具有相同ID的多个项目。
通过脚本添加的div不应该有id btnlist但是class =“btnlist”

Answer 2

DEMO http://jsfiddle.net/TWQbD/4/

$('.databasebtn').on('click',function() {
        $(this).next('.databasetext').append("<div class='btnlist'>test78b.php</div>");
        $(this).next('.databasetext').find('.btnlist').last().slideDown("1000"); 
});

jquery - 单击，追加，加载，slideDown未按预期显示

2 个答案: