Append links without redirecrting

Question

I have 2 divs on website:

<button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button>
<button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks">Hide Links</button>
<div style="display: none" id="showLinks">
    <table>
        @foreach ($websites as $website)
        <tr>
            <td>
                <a target="_blank" class="websites disabled" href=" {{ url('website/' . $website->name) }}"> {{  $website->name }}
                </a>
            </td>
        </tr>
        @endforeach
    </table>
</div>

<div id="content-link2" class="flex-item2"></div>

What I want to do is if user clicks on a link in div "showLinks", link is appended to div "content-link2", but it doesn't redirect user.

However, if I append a link and click on link that has been appended to "content-link2" I do get redirected.

I tried using e.preventDefault() and that seems to work. However, when I click on link that has been appended I still don't get redirected. How can that be solved?

$(".websites").on('click', function(e) {
    e.preventDefault();
    $(this).appendTo("#content-link2");
    $(this).removeClass("disabled");
    $("#showLinks").hide("slow");
    $("#hideLinks").hide("slow");
    $("#addLinks").show("slow");
});
$('#dialog li').each(function(i) {
    $(this).attr('id', 'page'+(i+1));
});
$("#addLinks").on('click', function() {
    $(".websites").removeClass("disabled");
});

Answer 1

Do you want something like this:-

$(".websites").on('click', function(e) {
    e.preventDefault();
    var data = $(this).removeClass('disabled').parent().parent();
    $(this).parent().parent('tr').remove();
    $("#content-link2").append(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="form-control margin btn btn-warning hide_all" id="addLinks">Link Pages</button>
        <button style="display: none" class="form-control margin btn btn-primary hide_all" id="hideLinks">Hide Links</button>
<div  id="showLinks">
<table>
    <tr>
      <td><a target="_blank" class="websites disabled" href=" abc.com"> click1</a>
      </td>
    </tr>
    <tr>
      <td><a target="_blank" class="websites disabled" href=" abc1.com"> click2</a>
      </td>
    </tr>
 </table>
</div>
<br>
<br>
<div id="content-link2" class="flex-item2"></div>

If you want only to append link:-

 $(".websites").on('click', function(e) {
        e.preventDefault();
        var data = $(this).removeClass('disabled');
        $(this).parent().parent('tr').remove();
        $("#content-link2").append(data);
    });

Answer 2

try to prevent default only if the disabled attribute is set

$(".websites").on('click', function(e) {
if($(this).prop("disabled", false))
e.preventDefault();
$(this).appendTo("#content-link2");
$(this).removeClass("disabled");
$("#showLinks").hide("slow");
$("#hideLinks").hide("slow");
$("#addLinks").show("slow");
});
$('#dialog li').each(function(i) {
$(this).attr('id', 'page'+(i+1));
}); 
$("#addLinks").on('click', function() {
$(".websites").removeClass("disabled");
 });