javascript - 使用 jQuery 生成的表填充输入字段

Question

我正在尝试填充模式输入框中的字段。单击表中的 Edit 按钮后会出现我的模式，它应根据单击按钮的表行填充字段。我仅使用 jQuery 生成了表格并使用 JSON 获取了数据。这是生成我的表格的代码:

$.getJSON("${pageContext.request.contextPath}/hostJSON", function (data) {
                var $table = $("#hostTable");
                $.each(data, function (i, h) {
                    if (h.status === "true") {
                        h.status = "<label class=\"label\" style=\"background-color: #b2c4aa;color:white\">Waiting</label>";
                    } else {
                        h.status = "<label class=\"label\" style=\"background-color: #FF8668;color:white\">Done</label>";
                    }
                    var $tr = $("<tr/>").attr('style', 'font-size:90%');
                    $("<td/>").html(h.id).appendTo($tr);
                    $("<td/>").html(h.name).appendTo($tr);
                    $("<td/>").html(h.contact).attr('style', 'text-align:center').appendTo($tr);
                    $("<td/>").html(h.email).attr('style', 'text-align:center').appendTo($tr);
                    $("<td/>").html(h.address).appendTo($tr);
                    $("<td/>").html(h.status).attr('style', 'text-align:center').appendTo($tr);
//BELOW IS THE REQUIRED LINE, WHICH IS A BUTTON:
                    $("<td/>").html("<span class=\"hostEditBtn\" data-host-name=\""+h.name+"\" data-toggle=\"modal\" data-target=\"#editEventHostModal\"><button class=\"btn btn-xs\" style=\"background-color:#b2c4aa;color:white\" data-toggle=\"tooltip\" title=\"Edit\"><span class=\"glyphicon glyphicon-pencil\"></span> Edit</button></span>").attr('style', 'text-align:center').appendTo($tr);
                    $tr.appendTo($table);
                });
            });

单击上述按钮时，它成功打开了我的模式，但未填充该字段。

$(".hostEditBtn").on('click', function () {
    var $this=$(this);
    $("#hostName").val($this.attr('data-host-name'));
});

我只包括 Name 部分，以免使我的帖子困惑。

我觉得还应该提一下，我在这个项目中一共有3个.jsp文件，分别是index.jsp, modals.jsp 和 jquery.jsp，我将其包含在我的 index.jsp 文件中，如下所示:

<%@include file="[name of file].jsp"%>

为什么它不起作用？是不是因为自定义属性(data-host-name)是用jQuery生成的？我怎样才能使它工作？

Answer 1

您可以试试这个代码片段。所以为了实现这一点，我没有像我在评论中提到的那样改变，只是将 #hostEditBtn ID 更新为 class .hostEditBtn 和 .hostEditBtn 中只是重构了代码。请试试这个片段:

在代码片段而不是您的 ajax 响应中，我定义了一个数据对象，从中填充此数据根据您的逻辑执行操作。

var $table = $("#hostTable");
var data = [{
 "status": true,
 "name": "test1",
 "contact": "12321312312",
 "email": 'test1@gmail.com',
 "address": 'test address 2'
},{
 "status": false,
 "name": "test2",
 "contact": "12321312312",
 "email": 'test2@gmail.com',
 "address": 'test address 2'
}]
$.each(data, function (i, h) {
   if (h.status === "true") {
      h.status = "<label class=\"label\" style=\"background-color: #b2c4aa;color:white\">Waiting</label>";
   } else {
     h.status = "<label class=\"label\" style=\"background-color: #FF8668;color:white\">Done</label>";
  }
  var $tr = $("<tr/>").attr('style', 'font-size:90%');
  $("<td/>").html(h.id).appendTo($tr);
  $("<td/>").html(h.name).appendTo($tr);
  $("<td/>").html(h.contact).attr('style', 'text-align:center').appendTo($tr);
  $("<td/>").html(h.email).attr('style', 'text-align:center').appendTo($tr);
  $("<td/>").html(h.address).appendTo($tr);
  $("<td/>").html(h.status).attr('style', 'text-align:center').appendTo($tr);
  $("<td/>").html("<span class=\"hostEditBtn\" data-host-name=\""+h.name+"\" data-toggle=\"modal\" data-target=\"#editEventHostModal\"><button class=\"btn btn-sm\" style=\"background-color:#b2c4aa;color:white\" data-toggle=\"tooltip\" title=\"Edit\"><span class=\"glyphicon glyphicon-pencil\"></span> Edit</button></span>").attr('style', 'text-align:center').appendTo($tr);
  $tr.appendTo($table);
});
                
                
                
$(".hostEditBtn").on('click', function () {
    $("#editEventHostModal #hostName").val($(this).attr('data-host-name'));
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



<table id="hostTable">
</table>

<div id="editEventHostModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <input type="text" id="hostName" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>