jQuery - Как изменить объект для Chrome и Safari

Question

У меня есть фрагмент, который принимает div, который в настоящее время скрыт, он добавляет класс, а затем, когда пользователь нажимает кнопку, добавляет HTML-код объекта в DOM.

Он работает в FF и IE, но не в Chrome и Safari, в последних двух он добавляет объект в DOM, но не отображает, как я уже говорил, он скрыт в начале, но добавленный класс делает его видимым. Более того, я специально добавляю css («display», «block»), который в FF добавляет «style = display: block» в div, но не в Safari и Chrome.

Вот код, где я получаю HTML-код div, который я хочу добавить позже, я буду добавлять копию для каждого клика:

var tempTicket = $('.tickets.extra:hidden').clone();
tempTicket.addClass('linea');
var ticketNombre = $('<div>').append(tempTicket.show().clone()).remove();

Вот код, когда пользователь нажимает:

    $('#addTicket').click(function(){
    //Miro si los tickets anteriores están completos
    console.log("quieres un ticket nuevo");
    if(checkTickets()){
                    ticketNombre.css('display','block'); 
        $(this).before(ticketNombre.html());
            }
     });

Любая помощь? спасибо!

Answer 1

var tempTicket = $('.tickets.extra:hidden');


$('#addTicket').click(function() {
    var ticketNombre = $('<div/>').append(tempTicket.clone(true).addClass('linea').show());
    console.log("quieres un ticket nuevo");
    if (checkTickets()) {
        ticketNombre.insertBefore(this);
    }
});

LIVE DEMO

Answer 2

Исправляю по стилям.

Так как div был вставлен правильно, я добавил

display:block!important

классу, чтобы он действительно показал это.

Answer 3

1. Что делают эти дополнительные .clone() и .remove() звонки?

2. Вызов .show() для элемента, которого еще нет в DOM, вряд ли сработает

3. сериализация вашего временного билета с .html() может потерять атрибуты или свойства.

Попробуйте это:

var ticketNombre = $('.tickets.extra:hidden').clone().addClass('linea');

$('#addTicket').click(function() {
    console.log("quieres un ticket nuevo");
    if (checkTickets()) {
        ticketNombre.insertBefore(this).show();
    }
});