附加链接而不重定向答案

【问题标题】：Append links without redirecrting附加链接而不重定向
【发布时间】：2017-07-23 04:38:49
【问题描述】：

我在网站上有 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");
});

【问题讨论】：

你试过'bind'而不是'on'

标签： javascript jquery html laravel-blade

【解决方案1】：

恕我直言，您需要从<a /> 标记中删除website 类，因为它有一个触发移动/preventDefault() 的钩子。

【讨论】：

【解决方案2】：

只有在设置了 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");
 });

【讨论】：

this.prop 不是我使用你的代码得到的功能
现在缺少一个bracket.chk

【解决方案3】：

你想要这样的东西吗：-

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

【讨论】：

是的！工作得很好！