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

我正试图用jQuery显示一个警报，用于在警报中显示title属性值的按钮单击。我无法显示，警报消息显示一个空字符串。这是我的轨迹

单击#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);
            }
        }
    });
});

在jQuery UI的第16182行（ctrl-F表示"target.removeAttr( "title" );"），您可以看到title属性被删除。这一行上方的注释准确地解释了为什么要这样做。

以下是jQueryUI文件中的注释，解释了删除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);
});

支持性证据。

以编程方式单击页面加载按钮请注意，页面加载时悬停事件未激活

如果你愿意，可以试试这样的方法。

$(function () {
     $(document).on("click","#btn1", function () {
        alert($(this).attr("title2"));
    });   
    $(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);
            }
        }
    });
    });

你的输入会像这个

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

试试这个：

<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 () {
    $("#btn1").click(function () {
        alert($(this).attr("title"));
    });
    $("#btn2").click(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);
            }
        }
    });
    });

JQuery命令是按钮元素上的.click（）。这是可行的。

编辑

我刚刚在我的本地机器上检查了一下，你的代码没有问题，试着包括如下jquery脚本：

<script language="Javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

它可能在它之后工作。

使用另一个属性可以解决您的问题。

data-alert

检查以下代码：

$(function() {
  $(document).on("click", "#btn1", function() {
    alert($(this).attr("data-alert"));
  });
  $(document).on("click", "#btn2", function() {
    alert($(this).attr("data-alert"));
  });
  $(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);
      }
    }
  });
});

.ui-tooltip,
.arrow:after {
  background: black;
  border: 2px solid white;
}
.ui-tooltip {
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  font: bold 14px"Helvetica Neue", Sans-Serif;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 20%;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<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." data-alert="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>

以上大多数答案都是正确的。在这里我展示了另一种替代方式，可能这种方式有点长。

$(document).on("click","#btn1", function () {
        var title_ref = $(this).attr("aria-describedby");
        var title = $("#"+title_ref+" .ui-tooltip-content").text()
        alert(title);
});

您不能像这个链接所说的那样在输入中使用title属性，这不符合标准，我将您的标题文本添加到名称字段中，并在提醒中显示文本更新fiddle

如果是答案，那么接受这个答案。

 alert($(this).attr("name"));

相关内容

最新更新

热门标签：