如何获得点击元素的href值？

问题描述：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.rawgit.com/makeusabrew/bootbox/master/bootbox.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<a onclick="return bootbox.confirm('are you sure?', function(e){ if (e) {window.location = this.href;} });" href="/Remove-Post/{{ $tb }}/{{$post->id}}" data-toggle="modal" data-target="#confirm-delete">Link</a>

注意到我使用this library为confirm。

，但此行并不在我的代码工作：

window.location = this.href;

，它总是（当我点击OK）重定向我在这里：

http://localhost:8000/undefined

如何解决它？

$ tb未定义。你使用任何模板引擎或框架？ –

难道你不使用e.target代替这个吗？ – Aer0

你可以做一个js小提琴吗？ @stack –

答

<a onclick="return bootbox.confirm('are you sure?', function(e){ if (e) {window.location.href = $(this).attr('href');} });" href="/Remove-Post/{{ $tb }}/{{$post->id}}" data-toggle="modal" data-target="#confirm-delete">

而不是onClick你可以做这样的事情。代替了window.location的

<a id="some-id" href="/Remove-Post/{{ $tb }}/{{$post->id}}" data-toggle="modal" data-target="#confirm-delete"> 
$('#some-id').click(function(){ 
    var link = $(this).attr('href'); 
    bootbox.confirm('are you sure ?', function(e){ 
     if(e){ 
     window.location.href = link; 
     } 
    }) 
})

它仍然会将我重定向到'undefined'页面 – stack

您能创建一个简单的小提琴吗？或者给我一点时间，我会为你创造它。 – imrealashu

好吧，我从功能（e，链接）{，'删除'链接'，现在它也可以，谢谢 – stack

答

是在this.ref范围内的函数？ 两年前写JS的我最后的行...

编辑：我记得，问题是返回值。如果它不是flase。它将移动到href位置。

没有你libary，但你能适应它：

<a onclick="if(confirm('are you sure?')) { alert(this.href);};return false;" href="/Remove-Post/{{ $tb }}/{{$post->id}}" data-toggle="modal" data-target="#confirm-delete">Click me</a>

编辑2：愚蠢的反对投票之前，你应该尝试的代码。有用。

答

使用window.location.assign，它可以为你想要的工作或window.location.href会工作。

答

使用此代码它会给你一个弹出，如果你点击是，那么它会进一步处理，否则留在同一页面上。试试这个。

<a onclick="return confirm('Are you sure you want to delete this?');" href="/Remove-Post/{{ $tb }}/{{$post->id}}" data-toggle="modal" data-target="#confirm-delete">

答

Bootbox是第三方插件。您无法在bootbox confirm回调函数内访问此指针。在使用bootbox confirm回调中的局部变量之后，必须首先在本地变量中保存this.href，然后再调用bootbox。

<a onclick="NavigatePage()" href="/Remove-Post/{{ $tb }}/{{$post->id}}"/> 

function NavigatePage(){ 
    var URL = this.href; 
    bootbox.confirm('are you sure?', function(UserResponse){ 
    if (UserResponse) { 
     window.location = URL 
    } 
    }); 
}

在你的情况，因为你正在访问的bootbox回调函数内this对象，你会得到不确定的。回拨内部this对象无法访问。

答

在你的代码中this.href不会因为this工作是指的在bootbox对象，这最后没有一个href属性：

我建议你只是使用一个共同的功能是用于显示对话框，并以同样的方式，你可以使用几个重定向到一个网址。也并设置动态地在对话框的标题是传递它作为一个参数，

这里是一个片段：（我已经conosle.log防止重定向更换location.href ...）

function redirect(node,message) { 
 
    if(!message) message =""; 
 
    return bootbox.confirm(message, function(e){ if (e) { 
 
    // we use console instead of redirecting directly 
 
    console.log(node.href); 
 
    // location.href = node.href; 
 
    } }); 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<script src="http://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script> 
 

 

 

 
<a onclick="redirect(this,'are you sure ?');" href="http://www.google.com" data-toggle="modal" data-target="#confirm-delete">link 1</a> 
 
<br> 
 
<a onclick="redirect(this,'leave the page ?');" href="http://www.bing.com" data-toggle="modal" data-target="#confirm-delete">link 2</a> 
 
<br> 
 
<a onclick="redirect(this,'are you sure to leave !! ?');" href="http://www.yahoo.com" data-toggle="modal" data-target="#confirm-delete">link 1</a>

@stack你可以使用一个功能和优化的解决方案 –

如何获得点击元素的href值？

相关推荐