Question

我有一个工作工具提示jQuery脚本：

HTML：

<div style="display:none;" class="tooltipcontent">
    <p class="para">Your VIN needs to be:</p>
    <ul class="vinhelp">
        <li>Exactly 17 characters for a vehicle manufactured after 1980 (1981 or later model year.)</li>
        <li>Without the letters I, O, or Q.</li>
    </ul>
</div> <span class="questinfo">test</span>

jQuery的：

jQuery('.questinfo').hover(function () {
     // Hover over code

     var title = jQuery('.tooltipcontent').html();

     if (title) {
         jQuery('<p class="tooltip"></p>')
             .html(title)
             .appendTo('body')
             .fadeIn('slow');
     }
 }, function () {
     // Hover out code

     jQuery('.tooltip').remove();
 }).mousemove(function (e) {
     var mousex = e.pageX + 20; //Get X coordinates
     var mousey = e.pageY + 10; //Get Y coordinates
     jQuery('.tooltip')
         .css({
         top: mousey,
         left: mousex
     })
 });

正在使用JSFIDDLE： http://jsfiddle.net/z3cnmf6p/1/

注意：它不是jquery Ui工具提示。

问题：这个脚本运行正常但我的要求是通过jQuery将hover函数绑定到动态创建的元素为此我试过jQuery .on（）而不是.hover（），但是它不起作用：

以下是我的尝试：

http://jsfiddle.net/vh5670cy/

Answer 1

从.tooltip创建.tooltipcontent似乎多余了 - 为什么不显示和隐藏它？ EG：http://jsfiddle.net/vh5670cy/1/

// creating a new span with class 'questinfo' dynamically.
$("#result").html('<span class="questinfo">Test</span>');

// Bind delegated hover events to a parent
$("body")
    .on("mouseover", ".questinfo", function(e){
        $('.tooltip').fadeIn('fast');
    })
    .on("mouseout", ".questinfo", function(e){
        $('.tooltip').hide();
    })
    .on("mousemove", ".questinfo", function(e){
        $('.tooltip').css({
            top: e.pageY + 10,
            left: e.pageX + 10
        })
    });

.tooltip {
    background:black;
    padding:15px;
    color:white;
    position:absolute;
    /* etc */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none;" class="tooltip">
    <p class="para">Your VIN needs to be:</p>
    <ul class="vinhelp">
        <li>Exactly 17 characters for a vehicle manufactured after 1980 (1981 or later model year.)</li>
        <li>Without the letters I, O, or Q.</li>
    </ul>
</div>
<div id="result"></div>

Answer 2

尝试使用此http://jsfiddle.net/vp3vqtk8/1/

 // creating a new span with class 'questinfo' dynamically.
jQuery("#result").html('<span class="questinfo">Test</span>');

// Binding hover event to the dynamically created span element

$(document).on("mouseenter", '.questinfo', function () {

    var title = jQuery('.tooltipcontent').html();

    if (title.length) {
        jQuery('<p class="tooltip"></p>')
            .html(title)
            .appendTo('body')
            .fadeIn('slow');
    }
}).mousemove(function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
        .css({
        top: mousey,
        left: mousex
    });
});

$(document).on('mouseleave', '.questinfo', function() {
    $('body').find('.tooltip').remove();
});

jQuery Tooltip事件不会在动态创建的元素上触发

2 个答案: