当以编程方式设置类ID时,嵌套的Accordion表图标不会更改

时间:2016-11-09 20:38:51

标签: javascript twitter-bootstrap grails gsp

我在Grails .gsp页面中嵌套了手风琴引导程序表,除了从" +"到" - "折叠/扩展时如果我取出动态id变量并静态设置数据目标id而不是使用data-target ="#$ {orgs.ORGN}"我可以让它工作。和id =" $ {orgs.ORGN}"。当我让g:each循环创建id和数据时,图标不会改变,尽管它们确实正确地折叠。有什么想法吗?是否有关于设置即时工作的id的内容?

 private void loadPage() {
    round1Boxer1Input = (EditText) findViewById(R.id.round1Boxer1Input);
    totalBoxer1Text = (TextView) findViewById(R.id.totalBoxer1Text);
    round2Boxer1Input = (EditText) findViewById(R.id.round2Boxer1Input);
    round3Boxer1Input = (EditText) findViewById(R.id.round3Boxer1Input);
    round4Boxer1Input = (EditText) findViewById(R.id.round4Boxer1Input);
    round5Boxer1Input = (EditText) findViewById(R.id.round5Boxer1Input);
    round6Boxer1Input = (EditText) findViewById(R.id.round6Boxer1Input);
    round7Boxer1Input = (EditText) findViewById(R.id.round7Boxer1Input);
    round8Boxer1Input = (EditText) findViewById(R.id.round8Boxer1Input);
    round9Boxer1Input = (EditText) findViewById(R.id.round9Boxer1Input);
    round10Boxer1Input = (EditText) findViewById(R.id.round10Boxer1Input);
    round11Boxer1Input = (EditText) findViewById(R.id.round11Boxer1Input);
    round12Boxer1Input = (EditText) findViewById(R.id.round12Boxer1Input;)

    final EditText[] boxer1List = {round1Boxer1Input, round2Boxer1Input, round3Boxer1Input, round4Boxer1Input,
            round5Boxer1Input, round6Boxer1Input, round7Boxer1Input, round8Boxer1Input, round9Boxer1Input,
            round10Boxer1Input, round11Boxer1Input, round12Boxer1Input};

    round1Boxer1Input.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            totalBoxer1Text.setText(String.valueOf(addRoundsBoxer1(boxer1List)));
        }
    });
}

我的JS是

<div class="col-lg-8">
<div class="panel panel-default">
    <div class="panel-heading"></div>
        <table class="table table-condensed" style="border-collapse:collapse;">
            <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Org</th>
                <th>Description</th>
                <th>Budget</th>
                <th>YTD</th>
                <th>Remaining</th>
            </tr>
            </thead>
            <tbody>
            <g:each in="${overview}" var="orgs">
                <tr data-toggle="collapse" data-target="#${orgs.ORGN}" class="accordion-toggle" style="cursor:pointer">
                    <td><i class="fa fa-plus-square"></i></td>
                    <td>${orgs.ORGN}</td>
                    <td>${orgs.ORGNTITLE}</td>
                    <td>${orgs.BUDGET}</td>
                    <td>${orgs.YTD}</td>
                    <td>${orgs.REMAINING}</td>
                </tr>
                <td colspan="8" class="hiddenRow">
                    <div class="accordian-body collapse" id="${orgs.ORGN}">
                        <table class="table table-condensed">
                        <thead>
                            <tr><th>Account</th>
                                <th>Title</th>
                                <th>Budgeted</th>
                                <th>YTD</th>
                                <th>Remaining</th>
                            </tr>
                            </thead>
                            <tbody>
                            <g:each in="${orgs.expenses}" var="budget">
                                <tr>
                                    <td>${budget.ACCTCODE}</td>
                                    <td>${budget.ACCTTITLE}</td>
                                    <td>${budget.BUDGETACCEPTED}</td>
                                    <td>${budget.YTDACTIVITY}</td>
                                    <td>${budget.BUDGETREMAINING}</td>
                                </tr>
                            </g:each>
                            </tbody>
                        </table>
                    </div>
                </td>
            </g:each>
            </tbody>
        </table>
</div>
</div>

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

听起来你正试图在DOM完全加载之前运行你的jQuery代码。我建议您在jQuery documentation中查看各种方法。通常,这是使用$( document ).ready()完成的。