CODEWITHSUNDEEP
jquery
OxfordSi
OxfordSi

Reputation: 177

jQuery .live() - Whats wrong with this?

The past 3 days I've tried to get this simple example to work but whatever I try I just can't seem to understand where I'm going wrong...

HTML:

<input type="text" id="textEntry" /> <button>Go</button>
<ul id="list">
    <li>Text from the input field will appear below</li>
</ul>

jQUERY:

$('button').click(function() {
    $enteredText = $('#textEntry').val();

    if($enteredText.length === 0) {
        alert('PLace an item in the field box');
    } else {        
        $newListItem = $('<li/>').html($enteredText).appendTo('#list');
    }

});

$('li').live('mouseover mouseout', function(event) {
    if(event.type == mouseover) {
        $(this).css('background-color', 'yellow');
    } else {
        $(this).css('backgorund-color', 'transparent'); }
});

Ultimately what I'm looking to do is have a user input an item into the text field which would then append itself to the existing list (this works - no issues). The user can then hover over a specific entry causing the background to turn yellow on mouseover and transparent on mouseout (the issue).

Any help would be swell.

Thanks.

Upvotes: 1

Views: 61

Answers (2)

Adil
Adil

Reputation: 148110

The event.type gives you name of event in string so mouseover should be "mouseover". 

$('li').live('mouseover mouseout', function(event) {
    if(event.type == "mouseover") {
        $(this).css('background-color', 'yellow');
    } else {
        $(this).css('backgorund-color', 'transparent'); }
});

Edit backgorund-color should be background-color

Upvotes: 1

SLaks
SLaks

Reputation: 887275

if (event.type == mouseover)

You don't have any variable named mouseover.

Upvotes: 1

Related Questions