Question

我正在尝试对其进行编码，以便当您悬停并单击一个单词（例如巧克力，糖或可可＆＃34;，它会给出一个句子，单击另一个单词，另一个单词。然后旋转的单词继续旋转。

任何建议都深表感谢。谢谢，伙计们:)）

HTML：

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

</div>

JS：

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

您的代码：

将…追加到DOM
为其附加点击处理程序
将…替换为… 100毫秒后

第3步完成后，#pasta范围与点击处理程序一起被删除！

正确的方法是使用事件委派。这是一种技术，您可以在DOM中附加一个更高级别的事件处理程序（在您可以合理预期不会被销毁的内容上，例如document），然后侦听向它冒泡的事件。如果事件源自感兴趣的元素，则激活处理程序！

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

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

appendTo功能不起作用

1 个答案: