Сбой IE при удалении атрибутов тегов с помощью jquery? - PullRequest
1 голос
/ 29 апреля 2011

Я использую другое поле для заголовка в элементах.Я разработал простой jQuery для этого, но ... лучший друг, IE, работает неправильно.Просто не удаляйте заголовок atrib, как это делают другие браузеры.Результат: у меня есть окно, отображающее заголовок atrib и окно собственного браузера.Как я могу решить это?(код следующий).ПРИМЕЧАНИЕ: работает на Chrome, Safari, Firefox, Opera.Но IE не делает.

<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    #dbox {
        background: #003767;
        padding: 5px 8px;
        position: absolute;
        margin: 20px;
        color: white;
        font-size: 14px;
        display: inline;
        /* border radius specif browsers */
        -webkit-border-radius: 3px; /* safari, chrome */
        -khtml-border-radius: 3px; /* ktml browsers */
        -moz-border-radius: 3px; /* firefox, mozila found. */
        -o-border-radius: 3px; /* opera, opmob */
    }
</style>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
    var dbox_time = 120;
    var delay_time = 500;

    $(document).ready(function(){
        $('<div id="dbox"></div>').insertAfter(('body'));

        $("[title != '']").each(function() {
            $(this).addClass('lkBox');
            $(this).css({border: '1px solid red'});
        });

        $('#dbox').empty();
        $('#dbox').css({
            display: 'none',
            opacity: '0'
        })

        $(document).mousemove(function(e){
            $('#dbox').css({
                'left': e.pageX,
                'top' : e.pageY
            })
        })

        $('.lkBox').mouseover(function(){
            $('#dbox').text($(this).attr('title'));
            $('#dbox').css({display: 'block'})
                      .stop().animate({opacity: '1'}, dbox_time)
        })

        $('.lkBox').mouseout(function(){
            $(this).attr('title', $('#dbox').text());
            $('#dbox').css({display: 'none'})
                      .stop().animate({
                opacity: '0'
            }, dbox_time)                
        })
    })

</script>

Тело:

<div style="float: left; width: 70%; padding: 50px;">
  <h1>Examples: (mouse over the links)</h1>
  <p>Curabitur lacus tortor, pellentesque eget <a href="#">interdum in</a>, auctor et lorem. In in quam lorem, vel <a href="#" title="i´m am a title =). must show">sagittis lec</a>. Donec felis leo, id fermentum nibh porttitor. Vestibulum ante <a href="#" title="">empy title (dont need to work)<span></span></a> primis. Lorem ipsum dolor sit amet, <a href="#" title="another title to show">lorem ipsum</a> elit.</p>
  </div>

ИНФОРМАЦИЯ: если предупреждение ставится после

$(this).attr('title', $('#dbox').text());

, оно работает на IE .. ноя не могу использовать оповещение.

1 Ответ

2 голосов
/ 29 апреля 2011

Я проверил ваш код в FF4, и у меня появляется такое же поведение всплывающей подсказки с двойным заголовком, как у вас в IE (всплывающая подсказка появляется, а затем встроенная FF всплывает примерно через секунду после продолжения наведения на ссылку).Из кода, который вы разместили, это абсолютно ожидаемое поведение.

Вам нужно либо использовать другой атрибут (т. Е. Использовать «dboxtitle», а не «title»), либо вам понадобитсядинамически удалять и повторно добавлять заголовок при наведении курсора мыши, чтобы браузер его не видел (ref: Отключение подсказок браузера по ссылкам и s ).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...