Jquery add href instead of click event

Question

Hi all,

I need to use href instead click event so I can use hover in the following statement.

What I am trying to do is to be able to use href as if was click event, so I can attach a function through href, therefore I could use the hover efect which is alredy done on css.

Its a delete button, so it would be a grey x and if you hover goes red, and if you press the button then it would delete the row.

Thanks.

$(document).ready(function(){
  $(".btnDeleteOther").live("click", function(){
  $(this).closest('tr').not(':only-child').remove();
});

Any Ideas?

Thanks.

Answer 1

You can use hover even in this scenario using CSS.

If the .btnDeleteOther is an anchor you could use this CSS attribute:

a.btnDeleteOther
{
//normal style
}

a:hover.btnDeleteOther
{
//hover style
}

Answer 2

a:hover.btnDeleteOther
{
  cursor: pointer;
}

i use this to mimic the look of a href while still using the onclick event.

Answer 3

You can set href to "#", e.g. <a href="#">The link text</a>. This tells browsers to not navigate to another page, but instead to jump to a non-existent anchor on the current page, essentially making the link do nothing. You can go one step further an return false from the click event handler, which tells the brower to not follow the link when clicked.

An alternative is to handle the jQuery hover event and change the css class for the element that is hovered over, e.g.:

$(document).ready(function(){
    $(".btnDeleteOther").hover(
        function(){ $(this).addClass('deleteButtonHovered'); },
        function(){ $(this).removeClass('deleteButtonHovered'); }
    );
});

Answer 4

In some browsers a:hover does not work if you do not have an href to get the onclick and the hover functionality you can

<a href="#" onclick="action(); return false;">Delete X</a>

the return false on the onclick will prevent the browsers default action taking place and the href="#" means that even if it does this is just a link to this page.

As per the other answers you can then us the CSS hover pseudo-class to style the element

a.delete{
    ...
}

a.delete:hover{
    ...
    color:red;
}

For the href="#" I would put this in the html you submitted if not you can use the following jquery to add the attribute

$(".btnDeleteOther").attr('href','#');

As for returning false from the click event it appares that at least when you have only one click event defined jQuery will return what your click function returns so

$(".btnDeleteOther").click(function(){doStuff(); return false;});

Or use the preventDefault method on event

$(".btnDeleteOther").click(function(event){doStuff(); event.preventDefault();});

see http://api.jquery.com/click/