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

Question

这是我的代码：

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

它总是 （当我点击 确定） 将我重定向到这里：

http://localhost:8000/undefined

我该如何解决？

Answer 1

this.ref在函数范围内吗？ 两年前写了我最后几行JS...

编辑：我记得，问题是 return 值。如果它不是闪光灯。它将移动到 href 位置。

没有你的库，但你可以修改它：

<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：在愚蠢地否决投票之前，您应该尝试代码。有效。

Answer 2

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

<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;
       }
    })
})

Answer 3

使用此代码，如果您单击“是”，它会给您一个弹出窗口，然后它将进一步处理，否则将停留在同一页面上。试试这个。

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

Answer 4

Bootbox 是第三方插件。您无法在 bootbox 确认回调函数中访问此指针。您必须先将 this.href 保存在局部变量中，然后再使用引导框确认回调中的局部变量来调用引导框。

<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
    } 
   });
 }

在你的情况下，你将得到未定义的，因为你正在访问引导框回调函数内的 this 对象。内部回调 this 对象不可访问。

Answer 5

在您的代码中，this.href 不起作用，因为 this 引用 bootbox object 而最后一个没有 href 属性：

我建议您只使用一个用于显示对话框的通用函数，并且您可以使用相同的方式使用多个重定向到 url。并且还通过将其作为参数传递来动态设置对话框标题，

这是一个片段：（我已将 location.href 替换为 conosle.log 以防止重定向...）

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>

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

How can I get the href value of clicked element?

html

javascript

confirm