锚标记在刷新后禁用和启用

Question

我必须在 ajax 调用成功后禁用 acnhor 标签。我试过了
how to disable anchor tag's in jquery? https://forum.jquery.com/topic/how-to-disable-a-tag-links-in-jquery How to enable or disable an anchor using jQuery? jQuery - disable and enable an anchor tag based on condition

没有任何效果。这是我的代码

<div class="container col-md-offset-1">
        
            <div class="row-fluid top-space-20">
                <table id="table" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>role</th>
                            <th>status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <td>{{using the each for loop }}</td>
                            <td><a id="deleteId" class="href-link" href="/goto" }}">{{
                                   my_data}}</a>
                            </td>
                           
                        </tr>
                       
                    </tbody>
                </table>
                
    <script>
        // Remove button event trigger
        $('#confirmdeletemodal').on('shown.bs.modal', function (e) {
            var triggeringElement = $(e.relatedTarget);
            $(this).find('#remove-button').attr('href', $(e.relatedTarget).data('href'));
            var modal = $(this)
            modal.find('.modal-body').text('Are you sure you wish to delete this ' + triggeringElement.data("jobrole") + ' data? ')
            $("#remove-button").on('click', function () {
                var jobid = triggeringElement.data('href');
                $.ajax({
                    type: 'POST',
                    url: '/delete',
                    data: { 'id': $(e.relatedTarget).data('href') },
                    success: function (data) {
                        console.log("Inside");
                        $("#deleteId").addClass('not-active').removeAttr("href");
                        var msg = "The role deleted is ";
                        $('#myModal').modal('show');
                        $('#myModal .modal-body p').html(msg);
                        console.log("outside");


                    }
                })

            })
        })

    </script>

我在 table 中列出一组数据。执行此 ajax 操作后，我必须禁用显示在 table 中的锚点。我应该怎么做

Answer 1

您只需添加 class 即可禁用 pointer-events -

样本-

$('#button').on('click', function() {
  $('a.link').addClass('disable-click');
});

.disable-click {
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>role</th>
      <th>status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>M</td>
      <td>P</td>
      <td><a id="deleteId" class="link" href="https://www.google.com">LINK</a></td>
    </tr>
  </tbody>
</table>
<button id="button">
Disable
</button>

锚标记在刷新后禁用和启用

Achor tag disable and enable once it's get refreshed

html

anchor

jquery

hyperlink