Установка значения элемента в обратном вызове события с использованием jQuery - PullRequest
Новая
       1

Установка значения элемента в обратном вызове события с использованием jQuery

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

Немного озадачен этим, так что я надеюсь, что вы, ребята, можете помочь.

Похоже, я обнаружил ошибку jQuery, связанную с IE.Создан небольшой тест (включен здесь), который я могу обмануть проблему.Прекрасно работает в Firefox и Chrome и не работает в IE8-9.

Проблема в том, что DIV «podcastStatus» не обновляется в нужный момент, когда обновление происходит в обратном вызове события.Вы можете проверить его локально, используя инструменты IE и Firebug, и установив точки останова, где я прокомментировал код.

Шаги:

  1. Установка точек останова в Firebug и IE
  2. Инструменты разработчика в соответствии с моими комментариями в коде
  3. Нажмите «Далее» или «Пред.»
  4. Текст в DIV должен измениться на «Далее» или «Пред.» В зависимости откакую кнопку вы нажали
  5. Текст в DIV должен затем вернуться к «Игра ...»

Я думаю, что это связано с innerHTML, но я попробовал трюк с оболочкой innerHTML DIVи без кубиков.

ПРИМЕЧАНИЕ. Я использовал как .text (), так и .html () без разрешения.

Вот тестовый пример: 

<body>

<style type="text/css">
    #podcastStatus {
        background-color: ButtonHighlight;
        font-size: 120pt;
        font-weight: bolder;
        color: Black;
        margin: 0 auto;
        text-align: center;
        position:absolute; top:0; bottom:0; left:0; right:0;
        margin:auto; height:200px; width:100%;
        z-index: 100;
    }
</style>

<div id="podcastStatus">Playing...</div>        

<div id="targetBtns">
<input type="button" name="prev" id="prev" value="Prev"/>
<input type="button" name="next" id="next" value="Next"/>
</div>        

<script>
function onButtonClicked(e) {
    switch (e.target.defaultValue) {
        case "Next":
            // Use IE tools or Firebug...
            //Set breakpoint here. Immediate after this executes, DIV text should be updated to "Prev"....
            $('#podcastStatus').html("Prev").show();
            break;
        case "Prev":
            // Use IE tools or Firebug...            
            //Set breakpoint here. Immediate after this executes, DIV text should be updated to "Next"....            
            $('#podcastStatus').html("Next").show();
            break;
    }

    //Set breakpoint here. DIV should show either "Prev" or "Next" at this point...        
    playPause();
}        

function playPause() {
    $('#podcastStatus').text("Playing...").fadeIn('slow');
}   

$( "#targetBtns" ).click( function(event) { onButtonClicked(event) } );

</script>            

</body>

Ответы [ 2 ]

1 голос
/ 06 апреля 2011

Ваш пример кода заставляет div менять текст на «Prev» или «Next» и отображать его.Затем он вызывает функцию, которая заставляет текст того же самого DIV быть установленным на «Playing ...» и говорит о его исчезновении, даже если он уже отображается.

  1. Текстизменения происходят так быстро, что вы никогда не увидите текст «Предыдущий» или «Следующий»
  2. , он не исчезнет, ​​если он уже отображается.

С этими двумя проблемами код появляется , чтобы ничего не делать в всех браузерах.

Все это говорит о том, что я так или иначе изменил бы ваш JS для согласованности: 

var $podcastStatus = $( '#podcastStatus' );

function playPause()
{
    $podcastStatus.text( 'Playing...' ).fadeIn( 'slow' );
}   

$( '#targetBtns' )
    .delegate( 'input[type="button"]', 'click', function onButtonClicked( e )
    {
        var text;
        switch( $( this ).val() )
        {
            case 'Next':
                text = 'Prev';
                break;

            case 'Prev':
                text = 'Next';
                break;
        }

        $podcastStatus.html( text ).show();

        playPause();

        e.preventDefault();
    } );
0 голосов
/ 06 апреля 2011

Internet Explorer не поддерживает свойство target.Вместо этого Microsoft изобрела srcElement.

Если вы проверите на наличие target и откат до srcElement, ваш код должен работать: 

switch ((e.target || e.srcElement).defaultValue) {

Но я бы подумалиспользуя немного больше jQuery и меньше JavaScript;)

...