JQuery 不适用于 foreach 循环按钮

Question

大家好，我正在开发我的新 MVC 应用程序，但是... 我想使用此代码的功能不起作用。 当用户点击一个任务时，它必须出现在段落中。 如您所见，该函数仅适用于第一个表格项。

 $(document).ready(function(){
        $("#btnAdd").click(function () {
            var task = $('#taskDescription').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

.table-left {
            width: 30%;
            display: inline-block;
        }
        tbody {
            overflow: scroll;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Dienst</th>

        </tr>
        </thead>
        <tbody>
        
            <tr>
                <td>hey</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hey" />
            </tr>
            <tr>
                <td>hi</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hi" />
            </tr>
            <tr>
                <td>hello</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hello" />
            </tr>
            <tr>
                <td>bye</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="bye" />
            </tr>
       
        </tbody>
    </table>
</div>
<p id="paragraph"></p>

谁知道该怎么做？ 我读了这篇文章：Why the jQuery Selectable plugin doesn't work with a foreach generated list?

但这似乎并没有解决我的问题

Answer 1

您不应该有多个具有相同 ID 的元素。 ID 应该始终是唯一的

其次，要获取与点击的btnAdd相关联的taskDescription的值，请使用$(this).closest('tr').find('.taskDescription').val()

$(document).ready(function() {
  $(".btnAdd").click(function() {
    var task = $(this).closest('tr').find('.taskDescription').val();
    $("#paragraph").append(task, "<button>-</button></br>");
  });
});

代码的工作示例

$(document).ready(function() {
  $(".btnAdd").click(function() {
    var task = $(this).closest('tr').find('.taskDescription').val();
    $("#paragraph").append(task, "<button>-</button></br>");
  });
});

.table-left {
  width: 30%;
  display: inline-block;
}

tbody {
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Dienst</th>

      </tr>
    </thead>
    <tbody>

      <tr>
        <td>hey</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hey" />
      </tr>
      <tr>
        <td>hi</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hi" />
      </tr>
      <tr>
        <td>hello</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hello" />
      </tr>
      <tr>
        <td>bye</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="bye" />
      </tr>

    </tbody>
  </table>
</div>
<p id="paragraph"></p>

Answer 2

将ID 更改为Class 改变jQuery

$(document).ready(function(){
        $(".btnAdd").click(function () {

            var task = $(this).parent().next('input').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

$(document).ready(function(){
        $(".btnAdd").click(function () {
        
            var task = $(this).parent().next('input').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

.table-left {
            width: 30%;
            display: inline-block;
        }
        tbody {
            overflow: scroll;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Dienst</th>

        </tr>
        </thead>
        <tbody>
        
            <tr>
                <td>hey</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hey" />
            </tr>
            <tr>
                <td>hi</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hi" />
            </tr>
            <tr>
                <td>hello</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hello" />
            </tr>
            <tr>
                <td>bye</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="bye" />
            </tr>
       
        </tbody>
    </table>
</div>
<p id="paragraph"></p>

Answer 3

在您的按钮标签中，将您的 id 更改为 class。并将您的 javascript 中的 # 更改为 。
示例：

<button type="button" id="blablabla"></button>, change to <button type="button" class="blablabla"> <br>

并在您的 javascript 更改中：

$(#blablabla) to $(.blablabla)