javascript - 在 jquery 函数中插入 html 代码

Question

我正在尝试插入以下内容:

<div class="modal fade" id="modalForwardMail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Forward this Mail</h4>
      </div>
      <div class="modal-body"><center>
<form name="contactform" method="post" action="forwardForm.php" class="form-horizontal" role="form">
<input type="email" class="form-control" placeholder="Receiver Email Address" name="forwardEmail">
                           <input class="form-control" placeholder="Full Name" type="text" value={{currentUser.get('fullName')}} name="fullName">
                             <input class="form-control" placeholder="Subject" type="text" name="subject">

<input class="form-control" placeholder="Sender Email Address" value={{currentUser.get('username')}} type="text" name="email">
<br><textarea  class="form-control" rows="5" placeholder="Notes" name="message" cols="30"></textarea>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
</form></center>
<h3></h3>
      </div>

    </div>
  </div>
</div>

进入:

 $('button.forward').click(function() {

 });

下面是完整的 jquery 代码:

var UploadMessage = Parse.Object.extend("Upload"); 

var querym = new Parse.Query(UploadMessage); 
querym.equalTo("user", currentUser); 
querym.equalTo("Type", "Letter"); 
querym.descending("createdAt");
querym.find({ 
success: function(querym) { 

 //alert("Successfully retrieved " );
    // Do something with the returned Parse.Object values
    for (var i = 0; i < querym.length; i++) { 
      var object = querym[i];
      (function($) {
   $('#mail-table').append('<tr class="results-row"><td>' + object.get('Date') + '</td><td>' +  object.get('Subject') + '</td><td>' + object.get('Sender') 
   + '</td></tr><tr class="expandMail"><td colspan="3">' 
   +'<label id="action"><button type="button" class="btn btn-default"  data-toggle="modal" data-target="#modalForwardMail" id="actionButton1"><i class="fa fa-share"></i>&nbsp Forward</button></label> <label id="action"><button class="btn btn-default" id="actionButton2"><i class="fa fa-recycle"></i>&nbsp Delete</button></label> </center><br /><label id="uploadedInfo">' +   object.get('Message') + 
'<br /> </label> <br />   <a href=" '+ object.get('documentURL') +' " target="_blank">  <img height="175" width="120" src="content/scan.png" alt="Image" id="previewThumb" class="img-responsive"></a><br /><a href=" '+ object.get('documentURL') +' " target="_blank"> <button  id="actionButton1" class="downloadButton"> <i class="fa fa-download fa-2x"></i>&nbsp Download</button></a><br />' + '</td></tr>');
})(jQuery);

      //alert(object.id + ' - ' + object.get('playerName'));
    }
    },
    error: function(error) {
    alert("Error: " + error.code + " " + error.message);
    }
    });
    $(document).on('click' , '.results-row', function () {
  $(this).next('.expandMail').toggle();

   $('button.delete').click(function() {
        $(this).parent().parent().prev().remove();
        $(this).parent().parent().remove();
    });

     $('button.forward').click(function() {
    $("#modalForwardMail").modal("now");
 });
});

我想要这样做的原因是因为我想从 jquery 函数中获取 object.get('documentURL') 并将其插入到表单中，因此最终结果如下所示:

<div class="modal fade" id="modalForwardMail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Forward this Mail</h4>
      </div>
      <div class="modal-body"><center>
<form name="contactform" method="post" action="forwardForm.php" class="form-horizontal" role="form">
<input type="email" class="form-control" placeholder="Receiver Email Address" name="forwardEmail">
                           <input class="form-control" placeholder="Full Name" type="text" value={{currentUser.get('fullName')}} name="fullName">
                             <input class="form-control" placeholder="Subject" type="text" name="subject">

<input class="form-control" placeholder="Sender Email Address" value={{currentUser.get('username')}} type="text" name="email">
<br><textarea  class="form-control" rows="5" placeholder="Notes" name="message" cols="30"></textarea>
object.get('documentURL')
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
</form></center>
<h3></h3>
      </div>

    </div>
  </div>
</div>

Answer 1

据我了解，您想在转发链接的模态单击中显示表单。所以这里是代码

html

   <a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal" id="getModal">Forward</a>


    <div class="modal fade" id="modalForwardMail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Forward this Mail</h4>
          </div>
          <div class="modal-body"><center>
    <form name="contactform" method="post" action="forwardForm.php" class="form-horizontal" role="form">
    <input type="email" class="form-control" placeholder="Receiver Email Address" name="forwardEmail">
                               <input class="form-control" placeholder="Full Name" type="text" value={{currentUser.get('fullName')}} name="fullName">
                                 <input class="form-control" placeholder="Subject" type="text" name="subject">

    <input class="form-control" placeholder="Sender Email Address" value={{currentUser.get('username')}} type="text" name="email">
    <br><textarea  class="form-control" rows="5" placeholder="Notes" name="message" cols="30"></textarea>
        <div id="url"></div>
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <input type="submit" class="btn btn-default" name="submit" value="Submit">
    </form></center>
    <h3></h3>
          </div>

        </div>
      </div>
    </div>

jquery

$(document).ready(function(){
       $('#getModal').click(function() {
            var pageURL = $(location).attr("href");
             $("#url").text(pageURL);
             $("#modalForwardMail").modal("toggle");
           // alert(pageURL);

            });

    });

DEMO1

使用您在下面的评论中指定的document.Url。

DEMO2