1

我已经设置了这个（更新的）JSFiddle，展示了我正在尝试做的事情，但基本上我认为这是一种事件冒泡的情况。我正在尝试定位（在工具提示中）一个按钮，单击该按钮将更改工具提示触发的输入值。我看到的问题是按钮“单击”事件永远不会触发。关于如何使这项工作的任何想法？

这是简单的代码（这是使用 jQuery 1.7.2 和 Tipsy 1.0.0a）：

<input type="text" title="<button class='Action'>Add Balance</button>" name="Balance"/>
<button class='Action'>Add Other Balance</button>

$(document).ready(function() {
    $('input[name="Balance"]').tipsy({
        trigger: 'focus',
        gravity: 'n',
        html: true
    });
    $('button.Action').click(function() {
        $('input[name = "Balance"]').val($(this).html());
    });
});
4

3 回答 3

1

问题是单击工具提示中的按钮元素会导致输入发出一个“focusout”事件，该事件被tipsy捕获并在单击事件冒泡之前将其及其子元素从DOM中删除。

这是它工作的演示，但只是因为删除父醉酒元素被延迟：

HTML：

<input title="<button class='action'>Add Balance</button>" name="balance"/>
<button class='action'>Add Other Balance</button>

JS：

$(document).ready(function() {
    $(this).on('click', '.action', function() {
        $('input[name=balance]').val($(this).html());
    });

    $('input[name=balance]').tipsy({
        trigger: 'focus',
        gravity: 'n',
        html: true,
        delayOut: 1000 // Delay allows 'click' to fire
    });
});​

（我冒昧地规范了你的类名）

于 2012-07-09T18:26:31.620 回答
0

尝试在您的title属性中初始化 Button，它可能不会触发，因为click()您的按钮的函数在那里看不到按钮，而且我在该插件的文档中找不到回调函数。

这就是我的想法：

      function initButton() { 
          $('button.Action2').click(function() {
              $('input[name = "Balance"]').val($(this).html());
          });
         }

      <input type="text" title="<button class='Action2'>Add Balance</button><script>initButton();</script>" name="Balance"/>
      <button class='Action'>Add Other Balance</button>

      $(document).ready(function() {
          $('input[name="Balance"]').tipsy({
              trigger: 'focus',
              gravity: 'n',
              html: true
          });
          $('button.Action').click(function() {
              $('input[name = "Balance"]').val($(this).html());
          });
      });
于 2012-07-09T17:54:41.947 回答
0

我相信当输入失去焦点时工具提示正在关闭。这发生在可以注册单击工具提示之前。

在这种情况下，您应该手动打开和关闭工具提示。

手动触发 Tipsy 的代码可以在这里找到：http: //onehackoranother.com/projects/jquery/tipsy/

编辑：我为你做的：http: //jsfiddle.net/xJQLu/3/

于 2012-07-09T18:06:58.947 回答