javascript - 从动态创建的 div 动态创建 div

Question

我正在努力实现以下目标。

我有使用从数据库中的字段生成的json创建的div，对于div的id，我使用通过json传递的id字段，这实际上创建了一个按钮。创建该 div 时，我创建了另一个 div，该 div 由 json 中传递的消息字段内容填充，我想做的是创建第二个“消息 div”隐藏它，然后分配一个 onclick 函数第一个动态创建的 div，当单击第一个 div 时将显示“消息 div”。我已经研究过如何通过动态创建 css 来做到这一点，但我读过的所有内容都不足以满足我的需求。

以下是我当前创建的jquery

$(document).ready(function() {//READY FUNC   

        $.getJSON("http://**************/**********/includes/messageRetrieve.php",function(data)  {//JSON

           $.each(data, function(key, val) {//iterate each data
               var id = val.id;
               var messageId = val.messageId;
               var messageSubject = val.messageSubject;
               var messageContent = val.messageDetail;

             $('#serverData').append('<div id="' + key + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + key + '" class="messageContent">' + messageContent + '</div>');


                        });//iterate each data

            });//JSON       

});//READY FUNC
</script> 

任何帮助实现这一目标将是最有帮助的

Answer 1

如果我理解正确，AJAX 调用后的循环应该是:

var id = val.id;
var messageId = val.messageId;
var messageSubject = val.messageSubject;
var messageContent = val.messageDetail;
var container = $('#serverData');

var alert = $('<div id="' + key + '-alert" class="messageAlert">' + messageSubject + '</div>');
var content = $('<div id="' + key + '-content" class="messageContent">' + messageContent + '</div>');

alert.click(function() { content.toggle(); });
alert.appendTo(container);
content.hide().appendTo(container);

这样，警报就会附加到您的 serverData 容器中，并且已经绑定(bind)到单击及其附带的内容。您的内容 div 被附加隐藏(hide() 调用)，警报 div 将切换它。

此外，在您的原始代码中，您正在创建两个具有相同 id (您的 key 变量)的 div ，并且两个元素不应该具有相同的 id，因此我将其更改为 key+'-alert' 和 key+'-content'。