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のイベントリスナーを追加しようとしましたが、その上にカーソルを合わせると、「テスト」という単語が何度も表示されます! 新しいリスト項目が注入された後、どうすればそれを実現できますか?

明確にしたい場合は、ここに 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 
$(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 に答える
1

.on()ではなく、.hover()次のものを使用する必要があります。

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

また、これには ID を使用しないでください。data-*代わりに属性を使用してください。そうしないと、ユーザーが同じ単語を 2 回入力するとコードが壊れます (ID は一意であるため)。

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

あなたが正しい！これは、 $(document).ready() がページの読み込み時にのみ呼び出されるためです。新しい要素を追加するたびに新しいイベント フックを手動で追加するか、条件に一致する新しい dom 要素を自動的に検出する jQuery の "on" 機能を利用できます。

于 2013-03-26T12:55:02.007 に答える