提示工具提示中的按鈕不發射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()); 
    }); 
});

來源

2012-07-09 Jason Sperske

的問題是，在提示按鈕元件上的點擊導致的輸入以發出一個「焦點」事件，在點擊事件發生之前，這些事件就會被醉人的事件所吸引，並將其從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-09 18:26:31

我開始欣賞用戶輸入在工具提示中是一個糟糕的用戶界面選擇我認爲我在尋找的是類似於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()); 
      }); 
     });

來源

2012-07-09 17:54:41

對於非工作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/

來源

2012-07-09 18:06:58 algiecas

提示工具提示中的按鈕不發射onClick事件

回答

相關問題