Question

我在网站上有2个div：

<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>

我想要做的是如果用户点击div“showLinks”中的链接，链接会附加到div“content-link2”，但它不会重定向用户。

但是，如果我附加链接并点击已附加到“content-link2”的链接，我会被重定向。

我尝试使用e.preventDefault()，这似乎有效。但是，当我点击已附加的链接时，我仍然没有被重定向。怎么能解决？

$(".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

尝试仅在设置了disabled属性时阻止默认

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

Answer 2

你想要这样的东西： -

$(".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>

如果您只想附加链接： -

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

Answer 3

恕我直言，您需要从website代码中删除<a />类，因为该代码会触发移动/ preventDefault()。

附加链接而不重定向

3 个答案: