Question

使用html5，jquery和php以及数据库构建手机应用程序。我有一个消息传递系统，我试图开发和jquery动态创建按钮的问题。我有代码创建一个消息主题div和消息内容div使用来自使用ajax和json调用的数据库的详细信息，然后我创建了一个删除消息按钮，它应该获取messageid，允许用户一旦读取就从数据库中删除消息。目前的问题是动态创建删除按钮jquery是复制按钮，所以我需要让jquery只创建带有消息id的按钮，然后使用jquery ajax函数删除消息。以下是我的代码，您可以在此处查看实时流程http://newberylodge.co.uk/webapp/message.html

网页代码

<link href="styles/pages.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript">

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

        $.getJSON("http://newberylodge.co.uk/webapp/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="' + id + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
             $('.messageContent').append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

</head>

<body class="body">

  <div class="top">
    <div class="logoSmall"></div>
    <a href="menu.html"><div class="menuIcon"></div></a> 

</div>
  <div class="pageBan3"></div>
  <div id="whiteBox" class="whiteBox">
    <div id="serverData"></div>
  </div>
<div class="l-a"></div>
<div class="tagLine1">Little minds with big ideas</div>  


<script>
             $(document).ready(function() {
    $("#serverData").on("click", ".messageAlert", function() {
        $(this).next(".messageContent").toggle();
    });

        $("#serverData").on("click", ".messageContent", function() {
        $(this).before().toggle();
    });
             })
</script>
</body>
</html>

动态创建的json代码

<script type="text/javascript">

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

        $.getJSON("http://newberylodge.co.uk/webapp/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="' + id + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
             $('.messageContent').append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

非常感谢任何帮助

Answer 1

您将删除按钮添加到一个容器中而不是每个容器中。

试试这个。

<script type="text/javascript">

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

        $.getJSON("http://newberylodge.co.uk/webapp/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="' + id + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
             $('#'+messageId).append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

此$('#'+messageId)会在每个邮件容器中添加删除按钮。

除此之外，我认为您应该为您的ID添加更具描述性的内容。

jquery复制动态创建的内容

1 个答案: