附加链接而不重定向
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】:恕我直言,您需要从<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);
);
【讨论】:
是的!工作得很好!以上是关于附加链接而不重定向的主要内容,如果未能解决你的问题,请参考以下文章
Rails 3 - 链接/按钮运行 ajax 请求而不重定向