Jquery 如何避免引导模式中的数据重复

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

这是我的小提琴

EMP名称
选择值
等级
内容
液体
$（文档）.ready（函数（）{
$（“#名称值”）。单击（函数（）{
var response='[{“rank”：“9”，“content”：“Alon”，“UID”：“5”}'；
响应+='，{“排名”：“6”，“内容”：“塔拉”，“UID”：“6”}]；
response=$.parseJSON（response）；
$（函数（）{
$。每个（响应、功能（i、项目）{
$（''）。追加(
$（''）.text（item.rank），
$（''）.text（item.content），
$（“”）.text（item.UID））.appendTo（“#records_table”）；
$（“#records_table tbody td”）.on（'click'，function（）{$（“#empname”）.val（$（this.text（））；
$（“#费用明细”）.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'); 
                                            }) 



                                         });

                                    },
                                });

                            }
                      });
                 });
         }); 

$（文档）.ready（函数（）{
$（'#getReferenceID'）。单击（函数（）{
$（#myModal1”）.on（“show.bs.modal”，function（）{
$（“#记录_表体”）.empty（）；
var selectedClass=$（“#className选项：selected”）.val（）；
var selectedExamType=$（“#examType选项：选中”）.val（）；
如果（selectedClass==“”&&selectedExamType==“”）{
警报（“请选择以上两个下拉列表”）；
返回false；
} 
其他的
{
$.ajax({
键入：“POST”，
url:“searchStudentToEditMarks”，
数据类型：“JSON”，
数据：{
类名：$（“#类名选项：选中”）.val（），
examType:$（“#examType选项：选中”）.val（）
},
成功：功能（数据，成功）{
警惕（成功）；
console.log（数据）
$.each（数据、函数（索引）{
var newRowContent=“”+数据[索引]+”；
$（“#记录_表体”）.append（newRowContent）；
$（“#记录_表体td”）。在（'click'，function（）上{
警报（$（this.text（））；
$（“#studentreferenceId”）.val（$（this.text（））；
$（“#myModal1”）.modal（'hide'）；
}) 
});
},
});
}
});
});
}); 

您可以将此代码添加到click函数中（在调用click ajax之前）：

$（“#记录_表”）.html（“RankContentUID”）

说明：

这将有效地预先重置html表。

下面是一个示例

而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();
    });

});

$（文档）.ready（函数（）{
$（“#费用明细”）。在（“show.bs.modal”，function（）上{
var response='[{“rank”：“9”，“content”：“Alon”，“UID”：“5”}'；
响应+='，{“排名”：“6”，“内容”：“塔拉”，“UID”：“6”}]；
response=$.parseJSON（response）；
$（函数（）{
$。每个（响应、功能（i、项目）{
$（''）。追加(
$（''）.text（item.rank），
$（''）.text（item.content），
$（“”）.text（item.UID））.appendTo（“#records_table tbody”）；
});
});
});
$（“#费用详细信息”）。在（“hidden.bs.modal”，function（）上{
$（“#记录_表体”）.empty（）；
});
});

我添加了一个

和一个

，以更好地定位目标

---

打开模式时，调用

.empty（）

将清空

，然后重新填充。此外，所使用的事件是show.bs.modal只需为代码设置一个标志计数器即可

$(document).ready(function(){
  var counter=0;
    $("#nameValue").click(function(){
if(counter<1){
  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');

    });
});
  }    
    counter++;
    alert(counter);
    });
});


$("#records_table tbody td").on('click', function() {
alert('hi');
    $("#empname").val($(this).text());
});

$(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'); 
                        }) 
                    });                                 
                },
            }); 
        }
    });
});

$（文档）.ready（函数（）{
var计数器=0；
$（“#名称值”）。单击（函数（）{
if（计数器
$（文档）.ready（函数（）{
$（'#getReferenceID'）。单击（函数（）{
$（#myModal1”）.on（“show.bs.modal”，function（）{
$（“#记录_表体”）.empty（）；
}); 
var selectedClass=$（“#className选项：selected”）.val（）；
var selectedExamType=$（“#examType选项：选中”）.val（）；
如果（selectedClass==“”&&selectedExamType==“”）{
警报（“请选择以上两个下拉列表”）；
返回false；
}   
其他的
{
$.ajax({
键入：“POST”，
url:“searchStudentToEditMarks”，
数据类型：“JSON”，
数据：{
类名：$（“#类名选项：选中”）.val（），
examType:$（“#examType选项：选中”）.val（）
},
成功：功能（数据，成功）{
警惕（成功）；
console.log（数据）
$.each（数据、函数（索引）{
var newRowContent=“”+数据[索引]+”；
$（“#记录_表体”）.append（newRowContent）；
$（“#记录#表体
$(document).ready(function(){
  var counter=0;
    $("#nameValue").click(function(){
if(counter<1){
  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');

    });
});
  }    
    counter++;
    alert(counter);
    });
});


$("#records_table tbody td").on('click', function() {
alert('hi');
    $("#empname").val($(this).text());
});

$(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'); 
                        }) 
                    });                                 
                },
            }); 
        }
    });
});