Question

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

这是简单的代码（这是使用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());
    });
});

Answer 1

问题是，点击工具提示中的按钮元素会导致输入发出一个'focusout'事件，该事件被tipy捕获并在点击事件冒出之前从DOM中删除它及其子项

这是一个有效的演示，但只是因为删除了父级的tipsy元素被延迟了：

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

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

Answer 2

尝试初始化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());
          });
      });

Answer 3

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

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

可以在此处找到手动触发提示的代码：http://onehackoranother.com/projects/jquery/tipsy/

修改：我为您完成了这项工作：http://jsfiddle.net/xJQLu/3/

在棘手的工具提示中按钮没有触发onClick事件

3 个答案: