如何點擊jquery中的按鈕和提醒消息？

Question

我使用這段代碼，但沒有工作，並沒有顯示警報，當我點擊「釋放」按鈕。 我認爲我的DOM Html和Jquery的問題已經可以使用了，但我不解決這個問題。

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"); 
     }); 
}); 

請幫我作秀警報。

Answer 1

您可以直接在提交按鈕上聽onclick事件，並使用jQuery獲取「父tr id」 closest函數，該函數使用指定的選擇器查找「最近的」父項（在本例中爲tag = tr）。

請參閱以下內容：

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

我希望它可以幫助你，再見。

Answer 2

你並不需要做的一切，只聽一個點擊您的input[type='submit']：

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

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

這裏是工作的小提琴：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>