Question

我正在开发一个像facebook这样的社交网站。我有一个页面，用于显示用户的消息，其中包含两个链接，即收件箱中每封邮件右下角的reply和delete。我的问题是，当我点击回复链接时，另一个html块应该来到用户可以将响应发送回发件人的位置。我已经编写了这样的代码

<div class="msgutil">
   <a href="" id="reply" onclick="return post_reply()" >reply</a>//this method does'nt works

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a> //dont check this
</div><!--end msgutil-->

我已经在post_reply（）中插入了html文档，就像这样

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
 </script>

<script type="text/javascript">
function post_reply()
 {
    $("<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>").insertBefore("#reply");
return true;
 }
 </script>

我不知道为什么它不起作用。

Answer 1

您在使用双引号的字符串中使用双引号。这是不可能的，因为你继续结束并重新开始字符串。

用单引号括起来：

$('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
//^                                                                                                              ^

或逃避双引号：

$("<form id=\"msgreply\" name=\"msgreply\" action=\"#\"> <textarea name=\"replyfield\" id=\"replyfield\"></textarea></form>").insertBefore("#reply");
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

您还可以使用以下HTML：

<div class="msgutil">
   <a href="#" id="reply">reply</a>
   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->

以及以下javascript：

$(document).ready(function() {
    $("#reply").click(function(e) {
        $('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
        e.stopPropagation();
        e.preventDefault();
    });
});

得到相同的结果。

Here's a JSFiddle demo.

Answer 2

我认为你应该按照更好的方法使用jQuery：

<强> HTML：

<div class="msgutil">
   <a href="" id="reply">reply</a>

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->

<强> jQuery的：

$("#reply").click(function(e){
    e.preventDefault();
    var formHtml = '<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>';
    $(this).before(formHtml);
});

<强> DEMO

使用jquery方法insertBefore在单击链接时插入html代码

2 个答案: