JavaScript删除我的文本框中的文本

我有多个带有

rel

属性的按钮。我叫他们

rel1

，

rel2

等等

rels包含我用Javascript检索的数据

当我点击按钮时，该按钮需要发送并运行第二个JavaScript。第二个JavaScript将

rel

发送到文本框

---

到目前为止，脚本正在运行。但是，当我单击第二个

rel

按钮时，第一个文本框中填充了

rel1

的数据，该文本框变为空

有人知道问题是什么吗？我如何解决

下面是button1的脚本：

<script type="text/javascript">
  $( document ).ready(function() {
    $('#grid1').DataTable({
      "bprocessing": true,
      "serverSide": true,
      "ajax": {
        "url": "response1.php",
        "type": "POST",
        "error": function(){
          $("#employee_grid_processing").css("display","none");
        }
      },
      "columnDefs": [ {
        "targets": 6,
        "render": function ( data, type, full, meta ) {
          return  '<button type="button" id="product_select1" rel1="'+data+'" onclick="getProduct1()">Button</button>';
        }
      } ]              
    });   
  });
</script>

$（文档）.ready（函数（）{
$（'#grid1'）。数据表({
“bprocessing”：正确，
“服务器端”：正确，
“ajax”：{
“url”：“response1.php”，
“类型”：“职位”，
“错误”：函数（）{
$（“员工网格处理”）.css（“显示”、“无”）；
}
},
“columnDefs”：[{
“目标”：6，
“呈现”：函数（数据、类型、完整、元）{
返回“按钮”；
}
} ]              
});   
});

此脚本将数据发送到文本框：

<script type="text/javascript">
  $('body').on('click', '.selectClass', function () {
    var product_txt1         = $(this).attr('rel1');

    $("#product_txt1").val(product_txt1);
    modal1.style.display = "none";

  });     
</script>

$（'body'）。在（'click'，'selectClass'，函数（）上{
var product_txt1=$（this.attr（'rel1'）；
$（“#product_txt1”）.val（product_txt1）；
modal1.style.display=“无”；
});     

也许这是必要的。这是我的第二个脚本：

<script type="text/javascript">
  $( document ).ready(function() {
    $('#grid2').DataTable({
      "bprocessing": true,
      "serverSide": true,
      "ajax": {
        "url": "response2.php",
        "type": "POST",
        "error": function(){
          $("#employee_grid_processing").css("display","none");
        }
      },
      "columnDefs": [ {
        "targets": 6,
        "render": function ( data, type, full, meta ) {
          return  '<button type="button" id="product_select1" rel2="'+data+'" onclick="getProduct2()">Button</button>';
        }
      } ]              
    });   
  });
</script>

<script type="text/javascript">
  $('body').on('click', '.selectClass', function () {
    var product_txt2         = $(this).attr('rel2');

    $("#product_txt2").val(product_txt2);
    modal2.style.display = "none";

  });     
</script>

$（文档）.ready（函数（）{
$（'#grid2'）。数据表({
“bprocessing”：正确，
“服务器端”：正确，
“ajax”：{
“url”：“response2.php”，
“类型”：“职位”，
“错误”：函数（）{
$（“员工网格处理”）.css（“显示”、“无”）；
}
},
“columnDefs”：[{
“目标”：6，
“呈现”：函数（数据、类型、完整、元）{
返回“按钮”；
}
} ]              
});   
});
$（'body'）。在（'click'，'selectClass'，函数（）上{
var product_txt2=$（this.attr（'rel2'）；
$（“产品txt2”）.val（产品txt2）；
modal2.style.display=“无”；
});     

问题是，当您单击一个按钮时，它会触发所有单击功能。因为按类处理click函数。您需要按唯一ID指定按钮，并按该ID处理单击功能。您可以这样合并单击功能：

$('body').on('click', '.selectClass', function () {
    var product_txt1         = $(this).attr('rel1');
    var product_txt2         = $(this).attr('rel2');
    if(product_txt1 != null && product_txt1 != undefined){
        $("#product_txt1").val(product_txt1);
        modal1.style.display = "none";
    }
    if(product_txt2 != null && product_txt2 != undefined){
        $("#product_txt2").val(product_txt2);
        modal2.style.display = "none";
    }

  });

---

“但是当我点击第二个rel的按钮时，第一个文本框中填充了rel1的数据，该文本框变为空。”我无法理解它。你能解释清楚一点吗？我用JSFIDLE做了一些东西。当我点击

textfield1

中的

按钮1

时，我得到了数据（数据=1）。当我点击

按钮2

，

textfield1

变为空，

textfield2

充满数据（data=2）。你的点击事件处理程序都是基于同一个元素类绑定的（在你的小提琴中没有元素有这个类），但它们假设当前元素（

this

）将有一个具有唯一名称的属性，并输出到具有特定ID的元素。这没有意义。您需要绑定到特定元素的单独处理程序，或者更好的是，需要一个基于类的通用处理程序绑定，该类使用DOM导航来确定哪个输入与单击的按钮关联。