1

リンクにjqueryツールチップがあるコードがあります。リンクをクリックすると、ダイアログが開きます。ダイアログを閉じると、ツールチップが自動的に再表示され、機能しなくなります。これは、Waterfox 18 および IE8 で発生します。テストする最新の FF を搭載したコンピューターは持っていませんが、Chrome では問題なく動作するようです。

http://jsfiddle.net/tLcZ2/に例を示しました

何か案は？これは jquery/jqueryui のバグですか? コードは次のとおりです。

<html>
    <head>
        <title>Test Tooltip</title>
        <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>            
    </head>
    <body>
    <ol>
        <li>Mouse over the test link - the "test tooltip" jquery tooltip should appear</li>
        <li>Click the link - the dialog should pop up</li>
        <li>Move the mouse away - the tooltip should disappear</li>
        <li>Close the dialog - the dialog should close <strong>but the tooltip also re-appears</strong></li>
        <li>Click anywhere on the page - the tooltip disappears</li>
        <li>Mouseover the test link - <strong>the tooltip no longer appears</strong></li>
    </ol>

        <a title="" class="tttest" href="javascript:void(0)">Test Link</a>
        <script language='javascript'>
        $(document).ready(function() {
            $(".tttest").tooltip({ content: "Test Tooltip" });
            $('.tttest').on('click', function() {
                $('<div></div>').html('test').dialog({
                        'title':'Test',
                        'buttons': {
                            'Close' : function() { $(this).dialog('close'); }
                        }
                    });
                return false;
            });
        });
        </script>
    </body>
</html>
4

1 に答える 1

1

これを試して：

実施例

HTML

<a class="tttest" href="javascript:void(0)" title="Must Have Title">Test Link</a>

タイトルが必要であることに注意してください

JS

 $(document).ready(function () {
     $(".tttest").tooltip({content:'Test Tooltip'});
     $('.tttest').on('click', function () {
         $('<div></div>').text('test').dialog({ // use .text rather than .html
             'title': 'Test',
             buttons: [{
                 text: "Close",
                 click: function () {
                     $(this).dialog("close");
                     $(".tttest").blur();  //remove focus from .tttest to close tooltip
                 }
             }]
         });
     });
 });
于 2013-08-04T22:20:41.233 に答える