jquery - 如何避免 Bootstrap 模式中的数据重复

Question

我正在尝试从 Bootstrap 模式填充文本。我已将 ajax 响应附加到 Bootstrap 模式，但是当有人单击选择值时，数据将重复添加到 Bootstrap 模式。

这是我的 fiddle http://jsfiddle.net/mwfbs3bk/10/

<div>
<label for="name" style="margin: 0px;">EMP NAME</label>
<input type="text" class="input-normal" id="empname" style="line-height: initial; margin-left: 6px;">


<button type="button" id="nameValue" class="btn btn-primary btn-xs" href="#fee-details" data-toggle="modal">Select Value</button>
</div>

<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <table id="records_table">
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>
</table>        
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

$(document).ready(function(){
    $("#nameValue").click(function(){

  var response = '[{"rank":"9", "content":"Alon", "UID":"5" }';
response += ',{"rank":"6","content":"Tala","UID":"6"}]';
response = $.parseJSON(response);

$(function () {
    $.each(response, function (i, item) {
        $('<tr>').append(
        $('<td>').text(item.rank),
        $('<td>').text(item.content),
        $('<td>').text(item.UID)).appendTo('#records_table');
       $("#records_table tbody td").on('click', function() {                   $("#empname").val($(this).text());       
       $('#fee-details').modal('hide');
              });
    });
});

    });

    $('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
}); 
});

实际脚本

$(document).ready(function() {

         $('#getReferenceID').click(function() {
             $("#myModal1").on("show.bs.modal", function(){
                 $("#records_table tbody").empty(); 
            var selectedClass = $("#className option:selected").val();
            var selectedExamType = $("#examType option:selected").val();
                if (selectedClass === ""&& selectedExamType === "") {
                    alert('Please Select Above two dropdowns');
                    return false;
                    } 

                else 

                    {

                                $.ajax({
                                        type : 'POST',
                                        url : 'searchStudentToEditMarks',
                                        dataType : 'JSON',
                                        data : {
                                            className : $("#className option:selected").val(),
                                            examType : $("#examType option:selected").val()
                                                },
                                    success : function(data,success) {
                                        alert(success);
                                        console.log(data)


                                        $.each(data,function(index) {                                           
                                            var newRowContent = "<tr><td>"+data[index]+"</td></tr>";
                                            $("#records_table tbody").append(newRowContent);
                                             $("#records_table tbody td").on('click', function() {

                                                alert($(this).text());
                                                $("#studentReferencID").val($(this).text());
                                                $("#myModal1").modal('hide'); 
                                            }) 



                                         });

                                    },
                                });

                            }
                      });
                 });
         }); 

Answer 1

这是一个jsFiddle

还有 JS:

$(document).ready(function(){
    $("#fee-details").on("show.bs.modal", function(){
        var response = '[{"rank":"9", "content":"Alon", "UID":"5" }';
        response += ',{"rank":"6","content":"Tala","UID":"6"}]';
        response = $.parseJSON(response);

        $(function () {
            $.each(response, function (i, item) {
                $('<tr>').append(
                $('<td>').text(item.rank),
                $('<td>').text(item.content),
                $('<td>').text(item.UID)).appendTo('#records_table tbody');

            });
        });
    });

    $("#fee-details").on("hidden.bs.modal", function(){
            $("#records_table tbody").empty();
    });

});

我添加了<thead>和一个 <tbody>以便更好地定位。

当您打开模式时，<tbody>将通过调用 .empty() 清空然后重新填充。另外，使用的事件是 show.bs.modal