JavaScript löscht den Text in meinem Textfeld

Question

Ich habe mehrere Schaltflächen mit dem Attribut rel. Ich nannte sie rel1, rel2 usw.

Die Rels enthält Daten, die ich mit Javascript abrufen.

Wenn ich auf den Button klicken muss die Schaltfläche senden ein zweites JavaScript ausführen. Das zweite JavaScript sendet die rel an ein Textfeld.

Bis jetzt funktioniert das Skript. Aber wenn ich auf die Schaltfläche für die zweite rel die erste Textbox, die mit den Daten von rel1 gefüllt ist, wird leer.

Weiß jemand, was das Problem ist und wie ich es lösen kann? Hier

ist das Skript für 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> 

Diese Skripte sendet die Daten an das Textfeld:

<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> 

Vielleicht ist es neccesary. Hier ist mein zweites Skript:

<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> 

Answer 1

Das Problem ist, wenn Sie auf eine Schaltfläche klicken, löst es alle Klick-Funktion. Weil Sie Klickfunktion nach Klasse behandeln. Sie müssen Ihre Schaltflächen nach eindeutiger ID angeben und die Klickfunktion mit dieser ID behandeln. Entweder können Sie Ihre Klickfunktion wie das fusionieren:

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

    });