Question

我使用了这段代码，但是当我点击＆＃34;发布＆＃34;时，它没有工作，也没有显示警报。按钮。我认为我对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

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

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

您可以直接在提交按钮上听取onclick事件，并使用jQuery的closest函数获取“parent tr id”，该函数找到具有指定选择器的“最近”父级（在您的情况下为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>

我希望它可以帮助你，再见。

如何在jquery中单击按钮和警报消息？

4 个答案: