[英]jQuery - How to do hover on code that has been added using prepend
I have added some code using prepend as you can see. 如您所见,我已经使用前置添加了一些代码。 Each of these items (the table cells) has a class called "predicate". 这些项目(表单元格)中的每一个都有一个称为“谓词”的类。 When the user hovers over these I want to replace "predicate" with "predicate-over". 当用户将鼠标悬停在这些上时,我想用“ predicate-over”代替“ predicate”。 I thought I had what I need below but it doesn't seem to work. 我以为我在下面有我需要的东西,但似乎不起作用。
<script>
$(document).ready(function() {
$("#leo-smart").hover(
function() { $("#007").prepend("<img src='images/hand.gif' width='22' height='27' id='just-added' />"); },
function() { $("#just-added").remove(); }
);
$("#007").hover(
function() { $("#007").prepend("<a href='object.html' border='0'><img src='images/hand.gif' width='22' height='27' id='just-added' alt='View this object' /> </a>"); },
function() { $("#just-added").$("#007").prepend("<img src='images/hand.gif' width='22' height='27' id='just-added' alt='View this object' />"); }
);
$("#leo-smart").click(
function() { $("#more-options").prepend("<table><tr><td><div class='predicate'>is a</div></td></tr><tr><td><div class='predicate'>has famous work</div> </td></tr><tr><td><div class='predicate'>has city (lived in)</div></td></tr><tr><td><div class='predicate'>has patron</div></td></tr><tr><td><div class='predicate'>has birthdate</div></td><tr><td><div class='predicate'>has birthcity</div></td></tr><tr><td><div class='predicate'>has nationality</div></td></tr></table>"); }
);
$(".predicate").hover(
function() { $(this).addClass("predicate-over"); },
function() { $(this).removeClass("predicate-over"); }
);
});
I think the main idea is that if you're modifying the DOM (adding predicate classes) you need to be rebinding hover at that point. 我认为主要思想是,如果要修改DOM(添加谓词类),则需要在那时重新绑定悬停。
$("#leo-smart").click(
function() {
// do your table jazz
$(".predicate").hover(
function() { $(this).addClass("predicate-over"); },
function() { $(this).removeClass("predicate-over"); }
);
}
);
Some events in jQuery can be wired with the live event. jQuery中的某些事件可以与实时事件关联。 When you wire up using live, jQuery will handle changes to the DOM for you. 当您使用实时连线时,jQuery将为您处理对DOM的更改。 If you aren't using live and you are changing the DOM, you need to be wiring the after the DOM has been changed. 如果您不使用实时功能,并且正在更改DOM,则需要在DOM更改后进行布线。 The live event does support mouseover and mouseout - if you were to use those events instead of hover, you'd be able to wire them outside of the click event. 现场事件确实支持mouseover和mouseout-如果要使用这些事件而不是将鼠标悬停,则可以将它们连接到click事件之外。
$(".predicate").live("mouseover", function() {
$(this).addClass("predicate-over");
});
$(".predicate").live("mouseout", function() {
$(this).removeClass("predicate-over");
});
You can use the prependTo function that returns a reference to the newly added element, in this way you don't need the 'just-added' id to find the element, for example: 您可以使用prependTo函数,该函数返回对新添加的元素的引用,这样,您无需“正好添加”的ID即可找到该元素,例如:
$('<img src="images/hand.gif" width="22" height="27" />')
.prependTo('#007')
.hover(function () {/**/}, function () {/**/});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.