3

現在、ボタンを保持しているブートストラップ ポップオーバーがあります。ポップオーバーは、マウスがテーブルの上にある場合にのみ表示されますtr。

私がやりたいのは、その行の要素にアクセスできるようにすることです。これは可能ですか。

ポップオーバー コード:

$('.popup').popover(
    {
      placement: 'top',
      trigger: 'manual',
      delay: { show: 350, hide: 100 },
      html: true,
      content: $('#shortcuts').html(),
      title: "Quick Tasks"
    }
  ).parent().delegate('#quickDeleteBtn', 'click', function() {
      alert($(this).closest('tr').children('td').text()); // ???
});
    var timer,
        popover_parent;
    function hidePopover(elem) {
        $(elem).popover('hide');
    }
    $('.popup').hover(
        function() {
          var self = this;
          clearTimeout(timer);
          $('.popover').hide(); //Hide any open popovers on other elements.
          popover_parent = self
          //$('.popup').attr("data-content","WOOHOOOO!");
          $(self).popover('show');            
        }, 
        function() {
          var self = this;
          timer = setTimeout(function(){hidePopover(self)},250);                 
    });
    $(document).on({
      mouseenter: function() {
        clearTimeout(timer);
      },
      mouseleave: function() {
        var self = this;
        timer = setTimeout(function(){hidePopover(popover_parent)},250); 
      }
    }, '.popover');

HTML:

<div class="hide" id="shortcuts">
    <a href="javascript:void(0);" id="quickDeleteBtn" class="btn btn-danger">Delete</a>
    </div>

行にポップオーバーを実装する JavaScript:

rows += '<tr class="popup datarow" rel="popover">';

ここで私が間違っていることと、trホバリングしているの子要素にアクセスする方法を知っている人はいますか?

JSFiddle: http://jsfiddle.net/C5BjY/8/

4

5 に答える 5

1

ここで私はそれを修正しました。ポップオーバーにポップオーバー要素が追加されたコンテナー オプションを渡すだけです。

$('.popup').each(function (index) {
    console.log(index + ": " + $(this).text());
    $(this).popover({
        placement: 'top',
        trigger: 'manual',
        delay: {
            show: 350,
            hide: 100
        },
        html: true,
        content: $('#shortcuts').html(),
        title: "Quick Tasks",
        container: '#' + this.id
    });
});
于 2013-06-03T09:26:58.417 に答える
0

ボタン クリック アラートでは、 $(this) はボタン自体を指します。DOM 階層では、ポップオーバー html はホバーされた tr の近くにはありません。

リスト項目にハンドラーを追加して、それ自体をグローバル変数に格納し、クリック イベントからアクセスします。ここでフォークされたフィドルを参照してください。

まず、グローバルを宣言します (一番上で):

var hovered;

次に、マウスオーバー ハンドラーをリスト項目に追加します。「on」を使用すると、新しく生成されたすべてのリスト項目もこのハンドラーを受け取ることに注意してください。

$('body').on('mouseover', '.popup', function() {
      hovered = $(this);   
 });

次に、ボタン クリック イベント内から必要なデータをアラートできます。

alert(hovered.text());
于 2013-06-03T08:38:38.423 に答える
0

こちらをご覧くださいJS Fiddle

デリゲートを削除し、id を使用してボタンを見つけ、ポップオーバーを作成してクリック ハンドラーにアタッチすると、追跡が容易になります。

$(self).popover('show');
$('#quickDeleteBtn').click(function(){
    alert($(self).text());
});

また、注意してください

$('#shortcuts').remove();

ポップオーバーで同じ ID のボタンを使用していたため、#shortcuts最初は選択できませんでしたが、削除できるようになりました。

于 2013-06-03T08:39:11.987 に答える
0

コードには既に正しい要素があります。popover_parent変数を再利用するだけで準備完了です:) FIDDLE

alert($(popover_parent).text());

または、次のようにすることもできます。

$('.popup').hover(

    function () {
        var self = this;
        clearTimeout(timer);
        $('.popover').hide(); //Hide any open popovers on other elements.
        $('#quickDeleteBtn').data('target', '');
        popover_parent = self;

        //$('.popup').attr("data-content","WOOHOOOO!");
        $('#quickDeleteBtn').data('target', $(self));
        $(self).popover('show');

    },

    function () {
        var self = this;
        timer = setTimeout(function () {
            $('#quickDeleteBtn').data('target', '');
            hidePopover(self)
        }, 250);
    });
    $(document).on({
        mouseenter: function () {
            clearTimeout(timer);
        },
        mouseleave: function () {
            var self = this;
            timer = setTimeout(function () {
                $('#quickDeleteBtn').data('target', '');
                hidePopover(popover_parent)
            }, 250);
        }
    }, '.popover');

クリックした要素を #quickDeleteBtn に保存してから、リンクを使用します。 ここでフィドル

于 2013-06-03T09:01:48.087 に答える