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

Question

我正在尝试实现我认为简单的点击、加载、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”