1

私がやろうとしていることを示すこの（更新された）JSFiddleを設定しましたが、基本的にこれはイベントバブリングの状況だと思います。クリックするとツールチップがトリガーする入力の値を変更するボタンを（ツールチップ内に）配置しようとしています。私が見ている問題は、ボタンの「クリック」イベントが発生しないことです。これを機能させる方法について何かアイデアはありますか？

簡単なコードは次のとおりです（これはjQuery1.7.2とTipsy1.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」イベントを発生させ、それがほろ酔いによってキャッチされ、クリック イベントがバブルアップする前に 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

入力がフォーカスを失ったときにツールチップが閉じられていると思います。これは、ツールチップのクリックが登録される前に発生します。

この場合、ツールチップを手動で開いたり閉じたりする必要があります。

ほろ酔いを手動でトリガーするコードは、http: //onehackoranother.com/projects/jquery/tipsy/にあります。

編集：私はあなたのためにそれをやった：http://jsfiddle.net/xJQLu/3/

于 2012-07-09T18:06:58.947 に答える
0

属性でボタンを初期化してみてください。ボタン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-09T17:54:41.947 に答える