Question

我想制作一些文本编辑器，我可以发送一些Ajax请求，当字悬停时。页面中有代码。

<div class="word_split" contenteditable="true">Don't break my heart.</div>

有jquery代码

$(document).ready(function () {
    $(".word_split").hover(function () {
        if ($(".word_split").children().length == 0) {
            $(".word_split").lettering('words');
        }
        else {
            $(".word_split").children().lettering('words');
        }
    });
});

$(document).ready(function () {
    $(".word_split span").hover(function () {
        //There'll be requests
        alert("sadfsdafsa");
    });
});

和CSS。

.word_split span:hover {
    font-weight:bold;
}

刻字只将每个单词放在span中的目标标记中，并在这种情况下给出类名，如word1，word2和e.t.c。

问题是第二个jquery函数不起作用，但Css可以。我不明白为什么以及如何解决它。感谢

Answer 1

页面加载时<span>不存在，因此事件不会连接到任何内容。您应该将on与'mouseover'事件一起使用，以便将来创建的元素将获得事件处理程序：

$(document).ready(function () {
    $(".word_split").on('mouseover', 'span', function () {
        //There'll be requests
        alert("sadfsdafsa");
    });
});

我看到的另一个问题是，当你运行它时，每次将鼠标悬停在文本上时，它都会触发事件处理程序并再次将单词拆分，因此最终会出现大量空转 - 这也会触发请求。如果可能，您最好直接在lettering()准备好运行document，而不是悬停：

$(document).ready(function () {
    if ($(".word_split").children().length == 0) {
        $(".word_split").lettering('words');
    }
    else {
        $(".word_split").children().lettering('words');
    }

    $(".word_split").on('mouseover', 'span', function () {
        //There'll be requests
        alert("sadfsdafsa");
    });
});

Working JsFiddle here

如上所述，理想情况下，它应该真正进入一个$(document).ready调用 - 它更有效率，如果没有别的话，您可以更好地控制订单代码。

Answer 2

您必须使用.on（），因为在页面加载时您没有span元素：

<div class="word_split" contenteditable="true">Don't break my heart.</div>

... （我在代码中注入了刻字功能）

(function($){
    function injector(t, splitter, klass, after) {
        var text = t.text()
        , a = text.split(splitter)
        , inject = '';
        if (a.length) {
            $(a).each(function(i, item) {
                inject += '<span class="'+klass+(i+1)+'" aria-hidden="true">'+item+'</span>'+after;
            });
            t.attr('aria-label',text)
            .empty()
            .append(inject)

        }
    }


    var methods = {
        init : function() {

            return this.each(function() {
                injector($(this), '', 'char', '');
            });

        },

        words : function() {

            return this.each(function() {
                injector($(this), ' ', 'word', ' ');
            });

        },

        lines : function() {

            return this.each(function() {
                var r = "eefec303079ad17405c889e092e105b0";
                // Because it's hard to split a <br/> tag consistently across browsers,
                // (*ahem* IE *ahem*), we replace all <br/> instances with an md5 hash
                // (of the word "split").  If you're trying to use this plugin on that
                // md5 hash string, it will fail because you're being ridiculous.
                injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
            });

        }
    };

    $.fn.lettering = function( method ) {
        // Method calling logic
        if ( method && methods[method] ) {
            return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
        } else if ( method === 'letters' || ! method ) {
            return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
        }
        $.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
        return this;
    };

})(jQuery);

$(document).ready(function () {
    $(".word_split").hover(function () {
        if ($(".word_split").children().length == 0) {

            $(".word_split").lettering('words');
        }
        else {
            $(".word_split").children().lettering('words');
        }
    });

    $(".word_split").on('mouseover', 'span', function () {

        alert("i am hover!!");
    });
});

Fiddle

Answer 3

你需要在刻字后调用第二个函数，因为当调用第二个函数时，span元素不存在。

$(document).ready(function () {
   if ($(".word_split").children().length == 0) {
       $(".word_split").lettering('words');
   }
   else {
       $(".word_split").children().lettering('words');
   }
   $(".word_split span").hover(function () {
       //There'll be requests
       alert("sadfsdafsa");
   });
 });

我认为你只需要这样做一次而不是每次都悬停。

为什么jquery悬停不起作用

3 个答案: