CODEWITHSUNDEEP
jquery
Ginnani
Ginnani

Reputation: 335

bind and live not working

(the input value is filled with 'a' 'links' but after the links are generated (inside another div ) thei do no act on hover) i have this:

<a href="#">This works</a><br><br>

<input class="input" type="text" style="width:400px;" value=" <a href='#'>This works...NOT</a> "/><br>
<div id="test"></div>

and this jquery:

$('a').hover(function() {
    $(this).css('color', '#f00');
},function(){
    $(this).css('color', '#000');
});

$(".input").bind('keyup', function() {
    $('#test').html(this.value);
});

i tried wit bind and live, but the link created inside a input and copyed to a div - no changes color on hover. Please help

Upvotes: 2

Views: 252

Answers (5)

NullRef
NullRef

Reputation: 3743

You need the live on the a's not the input.

$('a').live("hover mouseout",function() {
$(this).css('color', '#f00');
},function(){
$(this).css('color', '#000');
});

$(".input").keyup(function() {
$('#test').html(this.value);
});

This is the fiddle

Also I'm curious why you are going to all this trouble and not just using CSS.

This fiddle works as well

with

a:hover{
 color: red;
}

Upvotes: 0

Phil
Phil

Reputation: 11175

It's not working because of what Daniel said, but what you can do is this:

Place it in a div:

$("div").bind('keyup', function() { $('#test').html($(this).html()); });

Upvotes: 0

kei
kei

Reputation: 20511

Add this jquery:

$('a').live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
    $(this).css('color', '#f00');
  } else {
    $(this).css('color', '#000');
  }
});

Upvotes: 3

David Thomas
David Thomas

Reputation: 253396

I think you're looking for something a little closer to this:

$('a').live('mouseenter', function(){
    $(this).css('color','#f00');
}).live('mouseleave', function(){
    $(this).css('color','#000');
});

JS Fiddle demo.

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190976

You can't have an a inside the value of a text box. Hence, its not a real link in the DOM.

Upvotes: 0

Related Questions