使用jQuery UI激活工具提示时,按钮单击不会在警报中显示标题

Question

我试图用jQuery显示一个警告按钮单击,显示警报中title属性的值.我无法显示它,警报消息显示一个空字符串.这是我的踪迹

单击#btn1显示空标题.为什么单击时会清除title属性？

是$(document).tooltip影响一些如何？我删除了$(document).tooltip功能,它正在工作.我试图使它与jQuery UI工具提示一起使用.

<p>Your age:
    <input type=text title="We ask for your age only for statistical purposes.">
</p>
<p>
    <input type="button" id="btn1" title="This a test enabled button." value="hover me please">
</p>
<p>
    <input type="button" disabled="disabled" id="btn2" title="This a test disabled button." value="hover me please">
</p>

$(function () {
    $(document).on("click","#btn1", function () {
        alert($(this).attr("title"));
    });

    $(document).on("click","#btn2", function () {
        alert($(this).attr("title"));
    });

 $(document).tooltip({
        position: {
            my: "center bottom-20",
            at: "center top",
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        }
    });
});

Answer 1

在jQuery UI的第16182行(ctrl-F表示" target.removeAttr( "title" );"),您可以看到该title属性已被删除.这一行上面的评论解释了为什么这样做.

以下是jQuery UI文件中的注释,解释了为什么删除了title属性的值.

// if we have a title, clear it to prevent the native tooltip  
// we have to check first to avoid defining a title if none exists  
// (we don't want to cause an element to start matching [title])  
//  
// We use removeAttr only for key events, to allow IE to export the correct  
// accessible attributes. For mouse events, set to empty string to avoid  
// native tooltip showing up (happens only when removing inside mouseover).  

这是一个解决方法

var btn1_title_at_load = $("#btn1").attr("title");
$(document).on("click","#btn1", function () {
    alert(btn1_title_at_load);
});

这是一个交替的工作.

<input type="button" id="btn1" title="This a test enabled button." 
       value="hover me please" 
       data-title="This a test enabled button." />

$(document).on("click","#btn1", function () {
    var t = $(this).data("title");
    window.alert(t);
});

支持证据.

以编程方式单击页面加载上的按钮, 注意页面加载时悬停事件未处于活动状态.