appendTo功能失效

Question

我试图对其进行编码，以便当您悬停并单击一个单词(例如。巧克力，糖或可可“，它给出一个句子，点击另一个词，另一个句子。然后旋转的词继续旋转。

任何建议都是非常感谢的。谢谢各位：)

看看我的小提琴：http://jsfiddle.net/hE2pk/

HTML：

<div id="steps"> 
    <div id="receipe"></div>
   <div id="text"></div>

</div>

联署材料：

var words = [
'<span id="pasta">Penne</span>', 
'<span id="meat">Italian Sausage</span>',
'<span id="oil">Olive Oil</span>', 
'<span id="onion">Onion</span>'

];



var index = 0;


$(document).ready(function rotate() {
  document.getElementById('text').innerHTML =words[(index++)%(words.length)];
  if($("#text").is(":hover")){
    setTimeout(rotate, 500);
  }
  else{
    setTimeout(rotate, 100);
  }
})()


$(function(){
    $('#pasta').on('click', function () {
        $("<p>Cook 8 ounces of pasta, according to its package directions.</p>").appendTo('#receipe');

        $("#steps").html('<div id="text"></div>'); 
    }); 

});

Answer 1

你的代码：

1. 将<span id="pasta">…</span>附加到DOM中
2. 将单击处理程序附加到它
3. 之后用<span id="pasta">…</span> 100替换<span id="meat">…</span>

一旦步骤#3完成，#pasta span将与单击处理程序一起被抹掉！

正确的方法是使用事件委托。这是一种技术，您可以将事件处理程序更高地附加到DOM中(您可以合理地期望不会被销毁的东西，比如document)，然后侦听向它冒出来的事件。如果事件起源于感兴趣的元素，则启动处理程序！

$(document).on('click', '#pasta', function() { ... });

下面是您的示例，修复：http://jsfiddle.net/steveluscher/hE2pk/1/