jQuery .append () не работает в IE, Safari и Chrome - PullRequest
Новая
       37

jQuery .append () не работает в IE, Safari и Chrome

8 голосов
/ 17 мая 2010

Так что я использую функцию jJuery AJAX, чтобы прочитать какой-то XML для меня, и это работает просто отлично. Но теперь я пытаюсь манипулировать свойством display 4 разных динамически генерируемых div'ов, когда mouseup запускается из элементов option. Размер и x / y элементов div определяются XML и анализируются через.

Моя проблема заключается в том, что эти div либо не генерируются, либо просто не отображаются в IE, Safari и Chrome. В Firefox и Opera они работают. Я использую .append () jQuery для создания элементов div, а затем функцию .css () для управления ими. Просматривая инструменты разработчика Chrome, я вижу, что изменяемое в скрипте свойство css переопределяется свойством в таблице стилей. Какие-нибудь исправления?

Дивы, созданные здесь: 

    case "dynamic":
     var n = name;
     switch(portion){
      case "stub":
      $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>");
      break;
      case "body":
      $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>");
      break;
     }
    break;
    case "static":
     var n = name;
     switch(portion){
      case "stub":
      $('.ticket').append("<div class='stubEditable' id='"+n+"' title='stub'></div>");
      break;
      case "body":
      $('.ticket').append("<div class='bodyEditable' id='"+n+"' title='body'></div>");
      break;
     }
    break;

Функции Mouseup, которые изменяют свойство отображения: 

$('#StubTemplates').find('.ddindent').mouseup(function(){
    var tVal = $(this).val();
    var tTitle = $(this).attr('title');
    if(!stubActive){
     $('.stubEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     stubActive = true;
    }else{
     $('.stubEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     stubActive = false;
    }
   });
   $('#StubTemplates').find('#stubTempNone').mouseup(function(){
    $('.stubEditable').css('display', 'none');
   });
   $('#BodyTemplates').find('.ddindent').mouseup(function(){
    var tVal = $(this).val();
    var tTitle = $(this).attr('title');
    if(!bodyActive){
     $('.bodyEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     bodyActive = true;
    }else{
     $('.bodyEditable').css('display', 'none');
     $('#'+tVal).css('display', 'block');
     bodyActive = false;
    }
   });
   $('#BodyTemplates').find('#bodyTempNone').mouseup(function(){
    $('.bodyEditable').css('display', 'none');
   });

Ответы [ 3 ]

4 голосов
/ 17 мая 2010

Поскольку в инструментах разработчика видно, что стиль правильно добавлен к элементу, проблема не столько в JQuery, сколько в каскаде CSS. Обычно все, что добавляется непосредственно к элементу, подобному этому, должно иметь приоритет, но есть исключения. Специфичность CSS может вызвать некоторое запутанное поведение. У вас есть что-то важное?

Кроме того, поскольку вы скрываете и отображаете с помощью display: block и display: none, убедитесь, что у вас нет видимости: скрытого в CSS, который будет переопределять.

Также, есть ли причина, по которой вы не просто используете .show () и .hide () или .toggle () ? Вы также можете попробовать удалить классы, которые мешают, и установить другие, используя .removeClass () , .addClass () или .toggleClass () .

Если ничего не помогает, вы всегда можете попробовать $ ('. BodyEditable'). Css ('display', 'none! Важный');.

Я стараюсь избегать! Важно, потому что это вызывает так много головных болей ... но это есть в спецификации по причине.

1 голос
/ 18 мая 2010

Так что мне удалось решить проблему. Опции в меню выбора не вызывали mouseup, поэтому я использовал функцию .change () в меню выбора при использовании селектора: selected, чтобы найти то, что было выбрано.

Большое спасибо Брэдли за то, что поставили меня на правильный путь.

0 голосов
/ 18 ноября 2012

простое решение этой проблемы для меня: добавьте в div вы добавляете css display:block;. вероятно, может помочь любой другой тип display:.

...