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

Таким образом, я использую функцию Ajax jQuery для чтения некоторого XML для меня, и это работало просто великолепно. Но теперь я пытаюсь управлять свойством дисплея 4 различных динамично сгенерированных отделений, когда mouseup инициирован от объектов опции. Размер и x/y отделений определяются XML и анализируются через.

Моя проблема заключается в том эти отделения или не сгенерирована или просто не обнаруживается в IE, Safari и Chrome. В Firefox и Opera, они действительно работают. Я использую .append jQuery () для создания отделений и затем .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');
   });
8
задан 17 May 2010 в 04:12
поделиться

2 ответа

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

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

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

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

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

4
ответ дан 5 December 2019 в 23:14
поделиться

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

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

1
ответ дан 5 December 2019 в 23:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: