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

Question

我正在尝试使用 jQuery 显示警报，单击按钮即可显示警报中标题属性的值。我无法显示它，警报消息显示一个空字符串。 Here is my trails

单击#btn1 显示空标题。为什么点击时标题属性会被清除？

$(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 for "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).  

Here is a work around

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

Here is an alternitive work around .

<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);
});

支持证据。

Programmatically click the button on page load 请注意，悬停事件在页面加载时未激活。