提示工具提示中的按钮不发射onClick事件

问题描述：

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

下面是简单的代码（这是使用jQuery 1.7.2和醉意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()); 
    }); 
});

答

的问题是，在提示按钮元件上的点击导致的输入以发出一个“焦点”事件，在点击事件发生之前，这些事件就会被醉人的事件所吸引，并将其从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 
    }); 
});

（我已经采取了使你的类名正常化的自由）

我开始欣赏用户输入在工具提示中是一个糟糕的用户界面选择我认为我在寻找的是类似于iOS复制/过去的功能 – 2012-07-10 16:22:42

这是一个接近我在http://jsfiddle.net/vryAz/6上解决的实现/以防其他人试图解决这个问题。 – 2012-07-10 16:33:24

答

尝试在你的title属性初始化按钮，它可能没有触发，因为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()); 
      }); 
     });

对于非工作JavaScript代码你是完全正确的（我很匆忙地设置你的JSFiddle）。我修复了它，并添加了一个额外的按钮，表明$（'button.Action'）正在工作，但工具提示中的按钮未触发。 Tipsy将允许（无效的）HTML在工具提示（你必须通过{html：true}，但它似乎不会干扰事件发射 – 2012-07-09 18:03:24

看到我的编辑.... – 2012-07-09 18:05:48

答

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

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

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

编辑：我是为了你：http://jsfiddle.net/xJQLu/3/

提示工具提示中的按钮不发射onClick事件

相关推荐