0

我正在制作一个句子生成器。到目前为止，它可以获取单词列表。然后它从 sentence.yourdictionary.com 获取数据来取一个句子。我使用 . 显示来自 sentence.yourdictionary.com 的第一句话$("ul.example>li").first()。然后将其放入段落 <p id="sents">中。

因此，如果您输入yo和nose这两个词，您的输出将是

<p id="sents"><li id="yo"><strong>Yo</strong> ' money
back a hund'd times, de preacher says!</li><li id="nose">I will no longer be caught with a
bleeding <strong>nose</strong>, heart palpatations, week long benders or hurting myself in any major way.</li></p>

当您将鼠标悬停在新列表项上时，我希望调用一个函数。

$(document).ready( function() {
    $("li").hover( function () {
        $(this).append("<span>Testing</span>");
        var id = $(this).attr("id");
        console.log(id);
    }, function () {
        $(this).find("span:last").remove();
    });
});

在将新列表项注入 DOM 后，这不起作用。我尝试为mousemove添加一个事件监听器，但是当你将鼠标悬停在它上面时，“test”这个词会出现很多次！注入新列表项后如何实现？

如果您想澄清一下，这是一个 jfiddle：http: //jsfiddle.net/varhawk5/cNKyx/1/

太感谢了。对不起，我只是在学习 javascript！

编辑

为了解决这个问题，我使用了 .on() 函数作为评论建议。虽然没有“悬停”事件，所以我认为这是唯一的方法。

$("body").on("mouseenter", "li#topWord", function() {
        var word = $(this).data("word");
        var sents = sentences[word]
        $(this).html("<div class='restOfSents' data-word='" + word +"'></div>");
        for(var i=1; i<sentences[word].length; i++) {
            $(".restOfSents").append($(sentences[word][i]));
        }
    console.log(sents);
});

$("body").on("mouseleave", "li", function() {
    // Remove the new div
});
4

3 回答 3

1

您应该使用.on()而不是.hover()：

$('li').on('mouseenter', function() { ... })

此外，您不应该为此使用 ID。改为使用data-*属性。否则，当用户两次输入相同的单词时，您的代码将中断（因为 ID 是唯一的）。

var id = $(this).attr('data-example');
于 2013-03-26T12:50:48.233 回答
1

你是对的！这样做的原因是 $(document).ready() 仅在页面加载时被调用。您可以在添加每个新元素时手动为每个新元素添加新事件挂钩，或者利用 jQuery 的“on”功能自动检测符合您条件的新 dom 元素。

于 2013-03-26T12:55:02.007 回答
1 
$(document).ready( function() {
$(document).on('hover','li', function () {
    $(this).append("<span>Testing</span>");
    var id = $(this).attr("id");
    console.log(id);
}, function () {
    $(this).find("span:last").remove();
});
});
于 2013-03-26T12:48:20.910 回答