如何获得clicked元素的href值？

Question

Here is my code:

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

Noted that I use this library for confirm .

But this line doesn't work in my code:

window.location = this.href;

And it always (when I click OK ) redirects me here:

http://localhost:8000/undefined

How can I fix it?

Answer 1

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

Instead of onClick you can do something like this.

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

In your code the this.href doesn't work because of this is refering to the bootbox object and this last doesn't have an href property :

What I suggest to you is just using a common function that is used to show the dialog and in the same way you can use several each one redirect to a url. and also and set dynamicly the dialog title by passing it as a parameter,

Here is a snippet : ( I have replaced location.href by conosle.log to prevent redirecting ...)

 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> 

Answer 3

Use this code it will give you a pop up if you click on yes then it will processed further otherwise stay on same page. Try this.

<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 is a third party plugin. You cannot access this pointer inside the bootbox confirm callback function. You have to save this.href in a local variable first before calling bootbox there after use the local variable inside the bootbox confirm callback.

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

In your case you will get undefined because you are accessing this object inside the bootbox callback function. Inside the call back this object is not accessible.

Answer 5

Is this.ref in scope of the function? Wrote my last lines of JS two years ago...

Edit: I remember, problem is the return value. If it is not flase. It will move to the href location.

Do not have your libary, but you can adapt it:

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

Edit 2: Before stupidly down voting, you should try the code. It works.