Jquery 在一个按钮上，单击calling ajax将Success数据放置在一个div中并切换该div

注：我有三个div和三个不同id的按钮

使用此jquery：

<div class="toggle" id="response_18"></div>
<button class="btn btn-color btn-position shu" type="button" id="#response_18" value="18"></button>

$（文档）.ready（函数（）{
$（“.shu”）。单击（函数（）{
//var key=$（this.attr（'value'）；
var key=$（this.attr（'id'）；
$.ajax({
类型：“POST”，
url:“gv_calender.php”，
数据：{key:key}
}).完成（功能（数据）{
$（key）.html（数据）；
});
$（键）。切换（1000）；
$（“.toggle:visible”）.not（key.hide（）；
});
});

问题：在第一次加载文档时，我必须单击按钮两次。之后，我可以通过单击加载ajax数据并切换相应的div。

---

提前感谢您的建议

您不应该在id=”“HTML属性中使用#。相反，将id设置为simple“response_18”，然后从jquery调用它，如下所示：$（'#'+key）而不是$（key）我还尝试了您建议的DanL。但问题仍然存在，当第一页加载时，我必须在第一个按钮上单击两次，然后它的工作方式是假设创建一个小提琴。请包括您正在使用的任何外部库，并创建一个问题的示例，供其他人帮助您。好的，我一定会添加一个小提琴Hi DanL，这是我的小提琴链接。在第一页，load div滑出得太快了。在那之后，一切都很好。

<script type="text/javascript">
    $(document).ready(function () {
        $(".shu").click(function () {
//            var key = $(this).attr('value');

            var key = $(this).attr('id');
            $.ajax({
                type: "POST",
                url: "gv_calender.php",
                data: {key: key}
            }).done(function (data) {
                $(key).html(data);
            });

            $(key).toggle(1000);

            $(".toggle:visible").not(key).hide();
        });
    });
</script>