Создание jquery кнопки ui в скрытом div не работает, когда div отображается

Question

У меня есть div, который я хочу скрыть .. затем загрузите с помощью html, который включает в себя кнопку ... затем покажите ее еще раз - и пусть кнопка будет кнопку jquery ui.

$("#InfoBox").hide("slide", { 
    direction: "right" 
}, 1000, function() { 
    $("#InfoBox").html($("#InfoBoxClone").html()); 
}); 

$("#butEditor").button(); 

$("#InfoBox").show("slide", { 
    direction: "left" 
}, 1000); 

Когда он показывает, он определенно выглядит как кнопка jquery ui - но не ведет себя как одна.

Нелегко объяснить, поэтому я сделал jsfiddle, чтобы показать его обнаженные кости.

http://jsfiddle.net/Upland/JFUuH/6/

Где я буду неправильно?

Answer 1

Проблема в том, что вы меняете HTML-код, который находится в информационном окне. Это скопирует весь отображаемый HTML в InfoBoxClone, но он не будет копировать обработчики событий javascript, которые находятся на месте. Эти обработчики событий javascript создаются, когда на кнопку вызывается .button(), что и дает вам поведение наведения и нажатия.

Я бы рекомендовал скрывать и показывать HTML, а не копировать скрытый HTML. Мало того, что у вас не будет этой ошибки, но у вас есть дубликаты идентификаторов, потому что вы дублируете HMTL.