添加div不起作用

时间:2015-08-17 14:51:37

标签: javascript jquery html

这篇文章为我的html添加了一个下拉列表,脚本使其可以选择。当我点击添加按钮时,我试图追加它。它附加但不再可选择:

                    <div class="row noMargin topPadding">
                        <div class="col-xs-12 col-sm-1 col-md-2 " id="">
                            Correct Answer:
                        </div>
                        <div class="btn-group">
                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Answer<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Option1</a></li>
                                <li><a href="#">Option2</a></li>
                                <li><a href="#">Option3</a></li>
                                <li><a href="#">Option4</a></li>
                            </ul>
                        </div>
                    </div>


                <div class="row noMargin topPadding">
                    <button type="button" class="btn btn-default addQna" id="addQna">
                        Add
                </button>
            </div>

这是脚本。我试图将id分配给下拉列表,但没有运气:

    <script type="text/javascript">
        $(document).ready(function() {
            var currentItem = 1;
            $('#addQna').click(function(){
                currentItem++;
                $('#items').val(currentItem);
                var strToAdd ='<div class="row noMargin topPadding" id="question1"><div class="col-xs-12 col-sm-1 col-md-4  " id=""><input type="text" class="qnaQ form-control" id="qnaQ"></div><div class="col-xs-12 col-sm-1 col-md-2  " id="">  <input type="text" class="qnaOpt1 form-control" id="qnaOpt1"></div><div class="col-xs-12 col-sm-1 col-md-2  " id=""><input type="text" class="qnaOpt2 form-control" id="qnaOpt2"></div> <div class="col-xs-12 col-sm-1 col-md-2  " id=""><input type="text" class="qnaOpt3 form-control" id="qnaOpt2"></div><div class="col-xs-12 col-sm-1 col-md-2  " id=""><input type="text" class="qnaOpt4 form-control" id="qnaOpt4"></div><div class="row noMargin topPadding"><div class="col-xs-12 col-sm-1 col-md-2 " id="">Correct Answer:</div><div class="btn-group"><a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Answer<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Option1</a></li><li><a href="#">Option2</a></li><li><a href="#">Option3</a></li><li><a href="#">Option4</a></li></ul></div></div></div>';

                $('#questions').append(strToAdd);

            });
});
</script>
<script type="text/javascript">
$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
    });
</script>

1 个答案:

答案 0 :(得分:2)

改变这个:

def config = [ ttl: 0, url: url, appName: appName, enable: true ]
def endpoint = "${data}.json" as String

client.put(endpoint, config)
def values = client.get(endpoint, HashMap)

def appName = values.appName
def enable = values.enable

到此:

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
    });

然后再试一次。因为你要附加新的html,所以click事件处理程序将无法按照你拥有它的方式工作。但尝试我的建议它应该工作

这是一个小提琴:http://jsfiddle.net/s9an4zet/