jquery $this 失去当前标签的跟踪？
我从一本用来学习 jquery 的书中得到了这个 html 代码，我对其进行了一些修改
<body>
<h4><i>More</i> Mitch Hedberg Quotes</h4>
<div>
<input type='submit' id='tmpQuote1' value='View Quote' />
</div>
<div>
<input type='submit' id='tmpQuote2' value='View Quote' />
</div>
<div>
<p id="paragraph"> some text that will disappear</p>
</div>
$(document).ready(
function() {
$('p').mouseover(
function(){
$(this).replaceWith("<p> the text changed to this text </p>");
}
);
$('input#tmpQuote1').click(
function($e) {
$e.preventDefault();
$(this).replaceWith(
"<p>\n" +
" I would imagine that if you could understand \n" +
" Morse code, a tap dancer would drive you crazy.\n" +
"</p>\n"
);
}
);
$('input#tmpQuote2').click(
function($e) {
$e.preventDefault();
$(this).replaceWith(
"<p>\n" +
" I'd like to get four people who do cart wheels \n" +
" very good, and make a cart.\n" +
"</p>\n"
);
}
);
基本上，当我将鼠标悬停在最后一段上时，它会更改文本。 当我单击这两个按钮时，它们确实会更改为段落+文本。 到目前为止，一切都很好。但我遇到的问题是理解为什么当我将鼠标悬停在第一个和第二个上时第二个（新生成的）段落，鼠标悬停不起作用。 Jquery 解析器是否存在延迟。或者也许我不知道 $this 到底是如何工作的。
谢谢
I got this html code from a book that i'm using to learn jquery i modified it a little bit
<body>
<h4><i>More</i> Mitch Hedberg Quotes</h4>
<div>
<input type='submit' id='tmpQuote1' value='View Quote' />
</div>
<div>
<input type='submit' id='tmpQuote2' value='View Quote' />
</div>
<div>
<p id="paragraph"> some text that will disappear</p>
</div>
$(document).ready(
function() {
$('p').mouseover(
function(){
$(this).replaceWith("<p> the text changed to this text </p>");
}
);
$('input#tmpQuote1').click(
function($e) {
$e.preventDefault();
$(this).replaceWith(
"<p>\n" +
" I would imagine that if you could understand \n" +
" Morse code, a tap dancer would drive you crazy.\n" +
"</p>\n"
);
}
);
$('input#tmpQuote2').click(
function($e) {
$e.preventDefault();
$(this).replaceWith(
"<p>\n" +
" I'd like to get four people who do cart wheels \n" +
" very good, and make a cart.\n" +
"</p>\n"
);
}
);
Basically when I hover over the the last paragraph it changes text .
when I click on those two buttons they do change to paragraphs + text.
so far so good. But the problem I'm having is understanding why when I hover over the first & second (newly spawned) paragraphs , the mouseover doesn't work. Is there a delay in Jquery parser. Or maybe I do not know exactly how $this works.
thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将
.click更改为.live('click',function(){...});就可以了。原因如上所述：事件处理程序仅添加到已经存在的内容中。如果您想将其添加到动态添加的每个内容中，则必须使用.live。change
.clickinto.live('click',function(){...});and you'll be good. The reason is stated above: Event handlers are only added to content which is already there. If you want to add it to every content you add dynamically, you have to use.live.这是因为事件处理程序未订阅新
的点击事件。您应该在将事件处理程序添加到文档后手动设置事件处理程序，或者使用.live('click', function...)或更好的jQuery.livequery插件。This is because the event handler is not subscribed to the click events of the new
<p>. You should either set the event handler manually after adding them to the document, or use.live('click', function...)or, better,jQuery.livequeryplugin.您创建的函数仅应用于创建文档时创建的所有对象。稍后创建的任何内容（即动态添加的内容）都不会获得这些事件处理程序。
另请参阅这个问题：click() jquery function not available on new divs< /a>
基本上，要解决这个问题，您需要使用 jquery
delegate函数来解决该问题。（请参阅此处了解为什么使用
deligate()而不是live()）The functions you have created are only applied to all objects created when the document was created. Anything created later, i.e. added dynamically, will not get these event handlers.
See also this question: click() jquery function not available on new divs
Basically, to solve this, you need to use the jquery
delegatefunction which will solve the problem.(See here for explanation on why
deligate()and notlive())