Question

我已经实现了JavaScript函数，可通过单击按钮添加带有删除按钮和编辑按钮的<tr>。新添加的删除按钮无法正常工作。编辑按钮可以正常工作。

当我添加一个新的<tr>时，它会正常工作。请帮助我解决这个问题。我在下面提到了我的代码。

newFile.html

 <table class="table table-striped" id="maintable">
   <thead>
       <tr>
          <th>Game Code#</th>                                                 
          <th>Description</th>
          <th>Subtotal</th>
          <th></th>
       </tr>
   </thead>
   <tbody>
      <tr>
          <td>CHT01</td>
          <td>2. Haricane Women</td>
          <td>LKR. 500.00</td>
          <td style="float: right">
             <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button>
             <button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>
             </td>
         </tr>
       </tbody>
    </table>

<script>
$("#addnewrecord").click(function () { 

        $("#maintable").each(function () {

            var tds = '<tr>';
            //*jQuery.each($('tr:last td', this), function () {*
                tds += '<td>' + $('#inputGroupSelect01code option:selected').text(); + '</td>';
                tds += '<td>' + $('#inputGroupSelect01dscr option:selected').text(); + '</td>';
                tds += '<td> LKR.' + $('#bidprice').val(); + '</td>';
                tds += '<td style="float: right"> <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button> <button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>  </td>';
            /*});*/
            tds += '</tr>';
            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });
    });
</script>

newfile.js

$(document).ready(function(){
function SomeDeleteRowFunction(table,child) { 
                table.find(child).remove();
    // you can also play with table and child (child is tr)
      }
          $(".delete").click(function(){

              swal({
                title: "Are you sure?",
                text: "Once deleted, you will not be able to recover this imaginary file!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
              })
              .then((willDelete) => {
                if (willDelete) {
          var $tbl = $(this).closest('table');
                  var $tr = $(this).closest('tr'); 
                  SomeDeleteRowFunction($tbl,$tr);
                  swal("Poof! Your imaginary file has been deleted!", {
                    icon: "success",
                  });
                } else {
                  swal("Your imaginary file is safe!");
                }
              });

          });

      });
 });

Answer 1

创建元素后，您需要重新加载onclick操作。您可以添加到js

function loadClick () {
     $(".delete").click(function(){

          swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
          })
          .then((willDelete) => {
            if (willDelete) {
      var $tbl = $(this).closest('table');
              var $tr = $(this).closest('tr'); 
              SomeDeleteRowFunction($tbl,$tr);
              swal("Poof! Your imaginary file has been deleted!", {
                icon: "success",
              });
            } else {
              swal("Your imaginary file is safe!");
            }
          });

      });
}

并在您的html中：

if ($('tbody', this).length > 0) {
     $('tbody', this).append(
} 
else {
     $(this).append(
}
loadClick();

Answer 2

请注意我将如何解决它，但这有点整洁，但仍然针对您的html-我不清楚swal是什么，一个诺言-当它返回此值时是什么？

swal可以退回到我已确认的位置-但我建议使用window.confirm使它工作。

$(document).ready( function() {
    let dFunc = function() {

        console.log( this); // this is a tr to be sure

        let tr = $(this);
        if ( window.confirm( 'are you sure ?')) {   // or whatever swal is
            tr.remove();

        }

    }

    $(".delete").on('click', function(e){   // jquery style
        dFunc.call( $(this).closest('tr')); // "call" dFunc on the tr

    });

    // above has taken care of what is on the page

    $("#addnewrecord").click(function () { 

            $("#maintable").each( function () { // each -  ? ok ? multiple ?


            var btn = $('<button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>');
            btn.on('click', function(e){    // jquery style
                dFunc.call( $(this).closest('tr')); // "call" dFunc on the tr

            });

            var tds = $('<tr />');
            //*jQuery.each($('tr:last td', this), function () {*
            tds.append( '<td />').html( $('#inputGroupSelect01code option:selected').text());
            tds.append( '<td />').html( $('#inputGroupSelect01dscr option:selected').text());
            tds.append( '<td />').html( 'LKR.' + $('#bidprice').val());

            var cell = $('<td style="float: right"><button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button></td>');
            cell.append( btn);  // btn already has click active and defined
            /*});*/

            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }

        });

    });

});

如何在javascript中使用删除按钮添加

2 个答案: