附加链接而不重定向

Posted

技术标签:

【中文标题】附加链接而不重定向【英文标题】: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' 【参考方案1】:

恕我直言,您需要从&lt;a /&gt; 标记中删除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);
    );

【讨论】:

是的!工作得很好!

以上是关于附加链接而不重定向的主要内容,如果未能解决你的问题,请参考以下文章

Rails 3 - 链接/按钮运行 ajax 请求而不重定向

jquery:更改URL地址而不重定向? [复制]

使用 .htaccess 重定向 404 而不重定向尾部斜杠

重定向进入空白页面而不重定向到路由 Laravel 5.8

如何仅重定向子目录而不重定向内容?

javascript更改get参数而不重定向[重复]