Append links without redirecrting

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");
});

Answers 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);
        });
    

Related Articles