отсутствует событие изменения аккордеона в jquery newContent - PullRequest
Новая
       8

отсутствует событие изменения аккордеона в jquery newContent

0 голосов
/ 05 апреля 2009

Я впервые использую аккордеон jQuery UI и думаю, что мне здесь чего-то не хватает. Я написал следующий код: 

    <div id="theAccordion">
        <h2><a href="#">Header1</a></h2>
        <div>old content 1</div>
        <h2><a href="#">Header2</a></h2>
        <div>old content 2</div>
        <h2><a href="#">Header3</a></h2>
        <div>old content 3</div>
        <h2><a href="#">Header4</a></h2>
        <div>old content 4</div>
        <h2><a href="#">Header5</a></h2>
        <div>old content 5</div>
    </div>
<script type="text/javascript">
    var map = {
        Header1: function(jqObj) { jqObj.append("<p>new content 1</p>"); },
        Header2: function(jqObj) { jqObj.append("<p>new content 2</p>"); },
        Header3: function(jqObj) { jqObj.append("<p>new content 3</p>"); },
        Header4: function(jqObj) { jqObj.append("<p>new content 4</p>"); },
        Header5: function(jqObj) { jqObj.append("<p>new content 5</p>"); }
    };
    function accordionChange(event, ui) {
        ui.newContent.empty();
        eval("map." + ui.newHeader.text() + "(ui.newContent)");
    }
    $(function() {
        $("#theAccordion").accordion({
            change: function(event, ui) { accordionChange(event, ui); }
        });
    });
</script>

Код работает должным образом, он запускает функции карты, но к контенту аккордеона код не добавляется, потому что объект newContent кажется пустым все время. Я отлаживал его с помощью инструментов отладки IE8, а jqObj.length равняется нулю, поэтому никаких изменений в новом контенте не производится. у вас есть представление о том, что здесь происходит?

Заранее спасибо

Ответы [ 4 ]

1 голос
/ 24 февраля 2010

На самом деле - у вас были проблемы, потому что есть ошибка в виджете аккордеона. Я только что сделал патч: http://dev.jqueryui.com/ticket/4469#comment:4

1 голос
/ 05 апреля 2009

Нашли решение!

Добавление абзаца в содержание решило проблему, поэтому код был изменен следующим образом: 

<div id="theAccordion">
    <h2><a href="#">Header1</a></h2>
    <div><p>old content 1</p></div>
    <h2><a href="#">Header2</a></h2>
    <div><p>old content 2</p></div>
    <h2><a href="#">Header3</a></h2>
    <div><p>old content 3</p></div>
    <h2><a href="#">Header4</a></h2> 
    <div><p>old content 4</p></div>
    <h2><a href="#">Header5</a></h2>
    <div><p>old content 5</p></div>
</div>

Спасибо всем за помощь

0 голосов
/ 05 апреля 2009

Может быть потому, что вы опустошаете его перед использованием? то есть: 

ui.newContent.empty();
eval( "map." + ui.newHeader.text() + "(ui.newContent)");

Попробуйте заменить обратный вызов accordionChange следующим: 

function accordionChange(event, ui) {
    var text = ui.newContent.text();
    ui.newContent.empty();
    eval("map." + ui.newHeader.text() + "(text)");
}
0 голосов
/ 05 апреля 2009

Возможно, это связано с привязкой, но я не уверен. Вы пытались поместить фактический код функции в инициализацию аккордеона. Обратите внимание, что я также изменил append () на html (), поскольку ваш исходный контент не был обернут в p. 

var map = {
    Header1: function(jqObj) { jqObj.html("new content 1"); },
    Header2: function(jqObj) { jqObj.html("new content 2"); },
    Header3: function(jqObj) { jqObj.html("new content 3"); },
    Header4: function(jqObj) { jqObj.html("new content 4"); },
    Header5: function(jqObj) { jqObj.html("new content 5"); }
};

$(function() {
    $("#theAccordion").accordion({
        change: function(event, ui) {
            ui.newContent.empty();
            eval( "map." + ui.newHeader.text() + "(ui.newContent)");
        }
    });
})
...