Jquery on hover html text change

Question

I have a button like below. I have a list of buttons. When user clicks it, I run a javascript function and it makes an ajax request, if request response is success, then I change status attribute of button tag. I change it from 1 to 2.

When the attribute status=1, I want user to see some text when hovering on button.

When the attribute status=2, I don't want him to see anything on button hover.

I tried like below but after status=2, still button text changes on hover. How can i fix this?

<button onclick="dosomething()" id="someid" status="1">name</button>

<script>
function dosomething(){
    $.ajax({
        type:"GET",
        url:"somefile.php",
        success : function(data) {
            if (data == '200') {
                $('#someid').attr('status', '2');
            }
        },
        error : function() {
            alert('error');
        },
    })
}

$(document).ready(function() {
    updateHoverStates()
});

$(document).change(function () {
    updateHoverStates()
});

function updateHoverStates() {
    $('button[status=1]').hover(
        function () {
            $(this).text('You are hovering');
        },
        function () {
            $(this).text('You are not hovering');
        }
    );
}
</script>

You should really be setting your click handler in the javascript; additionally, all of your jQuery should be inside $(document).ready(...). This code is a real mess. — Evan Davis
– Evan Davis, Commented Apr 30, 2012 at 20:05
I think its better to use css class instead of status attribute to keep your html valid... — Mohammad Ali Akbari
– Mohammad Ali Akbari, Commented Apr 30, 2012 at 20:12

Kodi · Accepted Answer · 2012-04-30 20:15:13Z

3

This may work, that way the event is checking the staus attr each time it is called, instead of just once at bind time.

function updateHoverStates() {
    $('button[status]').hover(
        function () {
            if($(this).attr('status') == '1')
                $(this).text('You are hovering');
        },
        function () {
            if($(this).attr('status') == '1')
                $(this).text('You are not hovering');
        }
    );
}

As a side note, I believe data-status would be a better supported way of having custom attributes, this also would allow the use of .data('status') instead of .attr('status').

Alternatively you may be able to use CSS to simulate that

button[status="1"]:hover {
    //possible attributes here
}

edited Apr 30, 2012 at 20:15

answered Apr 30, 2012 at 20:09

Kodi

7877 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trante Over a year ago

I suppose this spends more calculation time. But this worked as i wanted :) Thank you

Jonathan Payne · Accepted Answer · 2012-04-30 20:15:34Z

1

jsFiddle: http://jsfiddle.net/ajzsv/20/

<button onclick="dosomething()" id="someid" status="1">name</button>

<script>
function dosomething()
{
    $('#someid').attr('status', '2');
    $('#someid').unbind('hover');
}

$(document).ready( function()
{
    $('button').each( function()
    {
        $(this).hover(
        function ()
        {
            $(this).text('You are hovering');
        },
        function ()
        {
            $(this).text('You are not hovering');
        });
    });
});
</script>

answered Apr 30, 2012 at 20:15

Jonathan Payne

2,22313 silver badges11 bronze badges

Comments

Evan Davis · Accepted Answer · 2012-04-30 20:04:19Z

0

change events don't bubble up to the document, so updateHoverStates is probably not being called a second time.

answered Apr 30, 2012 at 20:04

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

1 Comment

Ben Sewards Over a year ago

what about using stop() then live() or toggle()? Can you toggle an on hover event and set the attribute differently each time, therefore, changing the text on the button?

Imp · Accepted Answer · 2012-04-30 20:06:47Z

0

You once set the hover function for all buttons that matched the selector button[status=1]. You changed the status attribute later, but that doesn't detach the hover event listeners from those buttons.

In the function where you set

$('#someid').attr('status', '2');

you should simply remove the event listener manually.

$('#someid').unbind('hover');

answered Apr 30, 2012 at 20:06

Imp

8,6091 gold badge28 silver badges36 bronze badges

1 Comment

trante Over a year ago

Thank you but i don't prefer to unbind hover because after changing status attribute i use another hover function.

Collectives™ on Stack Overflow

Jquery on hover html text change

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related