Wie klicken Sie auf die Schaltfläche und Warnmeldung in Jquery?

Question

Ich habe diesen Code verwendet, aber hat nicht funktioniert und keine Warnung angezeigt, wenn ich auf "Release" -Taste geklickt habe. Ich denke mein Problem für DOM Html und Jquery ist bereit zu verwenden, aber ich löse dieses Problem nicht.

HTML:

<table class="table" id="tableCompleted"> 
<thead> 
    <tr> 
     <th>Name</th> 

    </tr> 
</thead> 
<tbody> 
    <tr id="1"> 
     <td class="noEdit"> 
      <span id="s1">22</span> 
      <div> 
      <input id = "btn1" class="num" type="submit" value="Release"/> 
      </div> 
      <input type="number" id="num1" class="num"/> 
     </td> 
    </tr> 
    <tr id="2" class="2"> 
     <td> 
      <span id="s2">22</span> 
      <div> 
      <input id = "btn2" class="num" type="submit" value="Release"/> 
      </div> 
      <input type="number" id="num2" class="num"/> 
     </td> 
    </tr> 
    <tr id="3" class="3"> 
     <td> 
      <span id="s3">22</span> 
      <div> 
      <input id = "btn3" class="num" type="submit" value="Release"/> 
      </div> 
      <input type="number" id="num3" class="num"/> 
     </td> 
    </tr> 
</tbody> 

JQuery:

$(document).ready(function() 
{ 
    var ID,tmp_ID,count,flag=0; 

    $("tr").click(function() 
    { 
     ID = $(this).attr('id'); 
     /*$("#s" + ID).hide(); 
     $("#num" + ID).show(); 
     $("#22").show();*/ 
    }); 
    $("#"+ID).click(function(){ 
      alert("button"); 
     }); 
}); 

Bitte helfen Sie mir für die Show aufmerksam.

Answer 1

Sie können das onclick-Ereignis direkt auf den Sendeschaltflächen hören und die "parent tr id" mit den jQuery-Funktionen abrufen closest Funktion, die das "nächste" Elternteil mit dem angegebenen Selektor findet (in Ihrem Fall tag = tr).

Bitte beachten Sie folgendes:

$(document).ready(function() 
 
{ 
 
    var ID,tmp_ID,count,flag=0; 
 

 
    $(":submit").click(function() 
 
    { 
 
     ID = $(this).closest('tr').attr("id"); 
 
     alert("button " + ID); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" id="tableCompleted"> 
 
<thead> 
 
    <tr> 
 
     <th>Name</th> 
 

 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr id="1"> 
 
     <td class="noEdit"> 
 
      <span id="s1">22</span> 
 
      <div> 
 
      <input id = "btn1" class="num" type="submit" value="Release"/> 
 
      </div> 
 
      <input type="number" id="num1" class="num"/> 
 
     </td> 
 
    </tr> 
 
    <tr id="2" class="2"> 
 
     <td> 
 
      <span id="s2">22</span> 
 
      <div> 
 
      <input id = "btn2" class="num" type="submit" value="Release"/> 
 
      </div> 
 
      <input type="number" id="num2" class="num"/> 
 
     </td> 
 
    </tr> 
 
    <tr id="3" class="3"> 
 
     <td> 
 
      <span id="s3">22</span> 
 
      <div> 
 
      <input id = "btn3" class="num" type="submit" value="Release"/> 
 
      </div> 
 
      <input type="number" id="num3" class="num"/> 
 
     </td> 
 
    </tr> 
 
</tbody>

Ich hoffe, es hilft Ihnen, bye.

Answer 2

Sie brauchen nicht alles, was zu tun ist, für einen Klick auf Ihre input[type='submit'] hören gerade:

$(function(){ 
    var ID,tmp_ID,count,flag=0; 

    $("input[type='submit']").click(function(){ 
     ID = $(this).parent().parent().attr('id'); 
     alert("button"); 
    }); 
}); 

Hier ist der Arbeits Fiddle: https://jsfiddle.net/L34eLL40/3/

Answer 3

$(document).ready(function() 
 
{ 
 
    var ID,tmp_ID,count,flag=0; 
 

 
    $("tr").click(function() 
 
    { 
 
     ID = $(this).attr('id'); 
 
     $("#"+ID).click(function(){ 
 
      alert("button with ID="+ID); 
 
     }); 
 
    }); 
 
     
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" id="tableCompleted"> 
 
<thead> 
 
    <tr> 
 
     <th>Name</th> 
 

 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr id="1"> 
 
     <td class="noEdit"> 
 
      <span id="s1">22</span> 
 
      <div> 
 
      <input id = "btn1" class="num" type="submit" value="Release"/> 
 
      </div> 
 
      <input type="number" id="num1" class="num"/> 
 
     </td> 
 
    </tr> 
 
    <tr id="2" class="2"> 
 
     <td> 
 
      <span id="s2">22</span> 
 
      <div> 
 
      <input id = "btn2" class="num" type="submit" value="Release"/> 
 
      </div> 
 
      <input type="number" id="num2" class="num"/> 
 
     </td> 
 
    </tr> 
 
    <tr id="3" class="3"> 
 
     <td> 
 
      <span id="s3">22</span> 
 
      <div> 
 
      <input id = "btn3" class="num" type="submit" value="Release"/> 
 
      </div> 
 
      <input type="number" id="num3" class="num"/> 
 
     </td> 
 
    </tr> 
 
</tbody>

Answer 4

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</script> 
</head> 
<body> 



    <table class="table" > 
    <thead> 
     <tr> 
      <th>Name</th> 

     </tr> 
    </thead> 
    <tbody> 
     <tr id="1"> 
      <td class="noEdit"> 
       <span id="s1">22</span> 
       <div> 
       <input id = "btn1" class="num" type="submit" value="Release"/> 
       </div> 
       <input type="number" id="num1" class="num"/> 
      </td> 
     </tr> 
     <tr id="2" class="2"> 
      <td> 
       <span id="s2">22</span> 
       <div> 
       <input id = "btn2" class="num" type="submit" value="Release"/> 
       </div> 
       <input type="number" id="num2" class="num"/> 
      </td> 
     </tr> 
     <tr id="3" class="3"> 
      <td> 
       <span id="s3">22</span> 
       <div> 
       <input id = "btn3" class="num" type="submit" value="Release"/> 
       </div> 
       <input type="number" id="num3" class="num"/> 
      </td> 
     </tr> 
    </tbody> 
<table> 
<script> 
     jQuery(document).ready(function() 
     { 
      jQuery("tr>td input[type=submit]").each(function(){ 
      jQuery(this).on("click",function(){ 
      console.log("clicked"); 
     }); 
     }); 
     }); 
</script> 
</div> 

</body> 
</html>