Question

我创建了在模态中显示某个gif的按钮，在模态中有一个添加到列表按钮。我创建了一个on click函数，它创建一个包含已完成和已删除按钮的新行。在列表项下，我希望单击的相同按钮显示相同的功能。因此，如果我点击胸部按钮，那么相同的胸部按钮将出现相同的模式显示。任何帮助都会很棒，这是我的代码：

https://codepen.io/anon/pen/ZQpRVW

HTML表格

<div class="col-md-7 col-md-offset-1">
    <div class="addedList">
        <table class="table table-striped table-bordered">
        <tr>
            <th colspan="3"><h2 id="titleName"></h2></th>  
        </tr>
        <tr>
            <td>List Items</td>
          <td class="complete">Completed</td>
          <td class="delete">Delete</td>
        </tr>
       </table>
    </div>
   </div>

jQuery函数

$("#add").on("click", function() {
      var newRow = $("<tr>");
      var exerciseTd = $("<td>").append();
      var completeBtn = $("<button>").addClass("btn btn-info").append("Completed");
      var completeTd = $("<td>").append(completeBtn);
      var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete");
      var deleteTd = $("<td>").append(deleteBtn);

    //Appending new row and delete button to table body
    newRow.append(exerciseTd).append(completeTd).append(deleteTd);
    $("tbody").append(newRow);
    });

Answer 1

我不熟悉bootstrap但是对于删除btn点击你可以使用像

这样的东西

$('.table').on('click' , '.btn.btn-danger' , function(){
  $("#myModal").modal("show");
});

Working Example

根据您的评论，您可以使用数据属性将您点击的按钮的名称传递给您的模态..例如..如果您点击胸部尝试将数据列表项设置为“胸部”到您的模态并且在#add click事件中使用.attr（'data-listitem'）获取此数据，然后像其他按钮一样附加

$(document).ready(function(){


    $("#chest").on("click", function() {
       $("h4").html("Bench Press");
        $("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#legs").on("click", function() {
       $("h4").html("Squat");
        $("p").html("<img id='yo' src='http://i.imgur.com/89ZQmzf.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#shld").on("click", function() {
       $("h4").html("Shoulder Press");
        $("p").html("<img id='yo' src='http://i0.wp.com/thegaysian.com/wp-content/uploads/2015/07/b001.gif?resize=420%2C420'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#bi").on("click", function() {
       $("h4").html("Incline Dumbbell Bicep Curl");
        $("p").html("<img id='yo' src='http://cdn.makeagif.com/media/8-05-2015/OZGZTL.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#tri").on("click", function() {
       $("h4").html("Tricep Dips");
        $("p").html("<img id='yo' src='https://45.media.tumblr.com/a731186fc986346bf6e2b96225e5f1f3/tumblr_njhocrvEo91six5o1o1_500.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });


    $("#abs").on("click", function() {
       $("h4").html("Standing Ab Twist");
        $("p").html("<img id='yo' src='https://s-media-cache-ak0.pinimg.com/originals/b2/9c/0e/b29c0e0eb56db9cb3451625c13a00766.jpg'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });




    $("#add").on("click", function() {
      var listitemdata = $(this).closest('.modal').attr('data-listitem');
      var newRow = $("<tr>");
      var exerciseTd = $("<td>").addClass("btn btn-primary").append(listitemdata);
      var completeBtn = $("<button>").addClass("btn btn-info").append("Completed");
      var completeTd = $("<td>").append(completeBtn);
      var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete");
      var deleteTd = $("<td>").append(deleteBtn);

    //Appending new row and delete button to table body
    newRow.append(exerciseTd).append(completeTd).append(deleteTd);
    $("tbody").append(newRow);
    });
$('.table').on('click' , '.btn.btn-primary' , function(){
  $("#myModal").modal("show");
});
});

Working Demo

注意： $（this）.attr（'id'）将为您提供元素的ID，您可以将其更改为$（this）.text（），以便为您提供这个元件

Answer 2

这不太理想，但它有效（请参阅评论以获得解释）https://codepen.io/anon/pen/NxRzJQ
基本上，它将所选练习的btn ID和btn文本放在一个变量中，然后将这些attr添加到按钮中。然后该按钮单击相关的练习。

 // globals 
 var currentBtn
 var currentBtnTxt

 //assign the var on each click
  $("#chest").on("click", function() {
  currentBtn = $(this).attr('id')
  currentBtnTxt = $(this).text() .. .

  //adds the button

  var modalBtn = $("<button>").addClass("btn btn-info exbtn ").attr("data-type", currentBtn).append(currentBtnTxt)
  var exerciseTd = $("<td>").append(modalBtn);
  //delete row
 $('.table').on('click' , '.btn.btn-danger' , function(){
   $(this).closest('tr').remove()
});
 //show modal from list btn
  $('.table').on('click' , '.exbtn' , function(){
   var type = $(this).data('type')
    //hide the add to list button
     $("#add").hide()
    $("#"+type).click()
});

另外，我在模态中添加了“取消”按钮

  //this will reset the add to list button when the modal closes
     $("#myModal").on('hide.bs.modal', function(){
    $("#add").show()
 })

如何添加单击到列表中的相同按钮？

2 个答案: