Node js项目（model.show（））中冲突的jquery脚本不起作用

Question

我正在尝试显示模型，但是model.show无法正常工作。我在这里看到过类似的问题，但无法解决。 我的html代码：

<table class="table table-bordered" id="mytable">
                            <thead class="thead-dark">
                              <tr>
                                <th scope="col">#</th>
                                <th scope="col">Username</th>
                                <th scope="col">Location</th>
                                <th scope="col">House Number</th>
                                <th scope="col" >Action</th>
                              </tr>
                            </thead>
                            <% var c=0; for(var i=0; i < data.length; i++) { c++; %>
                            <tbody>
                              <tr>
                                <th scope="row"><%= c %></th>
                                <td><%= data[i].user_name %></td>
                                <td><%= data[i].location %></td>
                                <td><%= data[i].house_number %></td>   
                                <td>
                                    <a href="#" class="btn btn-success" >Edit</a>
                                    <!-- <a href="javascript:void(0);" id="myDelete" data-toggle="modal" data-target="#myDeleteModal" class="btn btn-sm btn-danger myDelete" data-userid="<%= data[i].user_id %>">
                                        <%= data[i].user_id %>Delete
                                    </a> -->
                                    <a href="javascript:void(0);" class="btn btn-sm btn-danger delete" data-id="<%= data[i].user_id %>">Delete</a>
                                </td>
                                </tr>
                            </tbody>
                            <% } %>
                          </table>

我的模特

<!-- Delete Product Modal-->
      <form id="add-row-form" action="/delete" method="post">
        <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                                       <h5 class="modal-title" id="myModalLabel">Delete Product</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  </div>
                  <div class="modal-body">
                                               <strong>Are You Sure To Delete This Data?</strong>
                  </div>
                  <div class="modal-footer">
                            <input name="product_id" class="form-control product_id2" required>
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                         <button type="submit" class="btn btn-success">Delete</button>
                  </div>
                     </div>
           </div>
        </div>
    </form>

我的脚本。

<script src="bower_components/vendors/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="bower_components/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/assets/js/main.js"></script>


    <script src="bower_components/vendors/chart.js/dist/Chart.bundle.min.js"></script>
    <script src="bower_components/assets/js/dashboard.js"></script>
    jquery
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Vue -->
    <script src="bower_components/assets/js/Vue.js"></script>
    <!-- custom myscript.js -->
    <script src="bower_components/assets/js/myscript.js"></script>
    <script src="bower_components/assets/js/widgets.js"></script>
    <script src="bower_components/vendors/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="bower_components/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <script src="bower_components/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
    <script>
        (function($) {
            "use strict";

            jQuery('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: null,
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#1de9b6',
                enableZoom: true,
                showTooltip: true,
                values: sample_data,
                scaleColors: ['#1de9b6', '#03a9f5'],
                normalizeFunction: 'polynomial'
            });
        })(jQuery);
    </script>
<script>
                $(document).ready(function(){
                        //showing data to modal for edit record
                  $('#mytable').on('click','.edit',function(){
                    var product_id = $(this).data('id');
                    var product_name = $(this).data('product_name');
                    var product_price = $(this).data('product_price');
                    $('#EditModal').modal('show');
                    $('.product_name').val(product_name);
                    $('.price').val(product_price);
                    $('.product_id').val(product_id);
                  });
                        //showing modal for delete record
                        $('#mytable').on('click','.delete',function(){
                        $(this).hide();
                    var product_id = $(this).data('id');
                    $('#DeleteModal').modal('show');
                    $('.product_id2').val(product_id);
                  });

                });
            </script>

我不确定这是否是由于类似问题中某些人指出的对jquery的冲突舔或在某些地方做错了。

Answer 1

您的选择器错误，请尝试通过以下方式进行设置：

$(document).ready(function(){
    //showing data to modal for edit record
    $('#mytable .edit').on('click', function(){
        var product_id = $(this).data('id');
        var product_name = $(this).data('product_name');
        var product_price = $(this).data('product_price');
        $('#EditModal').modal('show');
        $('.product_name').val(product_name);
        $('.price').val(product_price);
        $('.product_id').val(product_id);
    });
    //showing modal for delete record
    $('#mytable .delete').on('click',function(){
        $(this).hide();
        var product_id = $(this).data('id');
        $('#DeleteModal').modal('show');
        $('.product_id2').val(product_id);
    });

});