jquery 手风琴更改事件缺少新内容答案

【问题标题】：jquery accordion change event missing newContentjquery 手风琴更改事件缺少新内容
【发布时间】：2009-04-05 16:18:00
【问题描述】：

我第一次使用 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 为零，因此对新内容没有任何更改。你知道这里发生了什么吗？

提前致谢

【问题讨论】：

标签： jquery jquery-ui accordion

【解决方案1】：

实际上，您遇到了麻烦，因为手风琴小部件中存在错误。我刚刚做了一个补丁：http://dev.jqueryui.com/ticket/4469#comment:4

【讨论】：

这个补丁是否随新版本的jquery一起提供？我正在使用 jquery 1.9，似乎 bug 仍然存在
然后提交一张新票，它已在 3 年前修复，所以它必须重新出现，否则它是一个不同的错误。

【解决方案2】：

找到了解决办法！

在内容中添加一段就解决了问题，所以改的代码是这样的

<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>

感谢大家的帮助

【讨论】：

【解决方案3】：

这可能与绑定有关，但我不确定。您是否尝试过将实际功能代码放入手风琴初始化中。请注意，我还将 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)");
        }
    });
})

【讨论】：

【解决方案4】：

可能是因为您在使用之前将其清空吗？即：

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

尝试将手风琴更改回调替换为：

function accordionChange(event, ui) {
    var text = ui.newContent.text();
    ui.newContent.empty();
    eval("map." + ui.newHeader.text() + "(text)");
}

【讨论】：