Question

我有几个选择设置，并添加了一种方法来添加一组新的。工作正常，除非我在新元素上再次运行相同的“on”函数，它会正常触发，但子元素不会改变。

$('body').on('change', '.select-funnel-process', function() {
    var data = {
        account: APP.account,
        type: $('option:selected', this).val()
    } 

    var selectDiv = $(this).parents('.funnel-group').find('.process-details')
    //this doesn't work on the new elements

    $.post(APP.api + 'get/get-data', data, function(res) {
        var json = JSON.parse(res);
        var result = json.result;

        for (var p in result) {
            //this doesn't work on the new elements
            selectDiv.append('<option class="added_option" value="' + p + '">' + p + '</option>').prop('disabled', false)
        }

        selectDiv.select2();    
        //this doesn't work on the new elements            
    });  
})

有没有办法将事件侦听器手动绑定到子元素？奇怪的是，初始选择有效，但它的子元素不起作用。

我认为这与我设置selectDiv

的方式有关

这是添加的html：

<div class="wrapper-class"> 
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-bars"></i> Funnel Step <span class="funnel-step-id"></span></h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
        </div><!-- /.box-header -->
        <div class="box-body">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline funnel-group">
                        <div class="form-group col-md-3">
                            <select class="form-control input-block-level select-funnel-process" name="properties">
                                <option selected="selected" disabled="disabled">Select a Process</option>
                                <option value="page">Page View</option>
                                <option value="event">Event</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <select class="form-control input-block-level process-details" name="properties" >
                                <option selected="selected" disabled="disabled">Select a Process First</option>
                            </select>
                        </div>
                    </form>


                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.box-body -->
    </div>  
</div>

编辑：已解决

我在新的DOM元素上缺少类'funnel-group'，所以将它用作选择器是没用的。添加它并且它起作用

Answer 1

所以你的选择器错了。将代码更改为最接近的。

var selectDiv = （$（本））。最近的（”。漏斗组 '）。找到（'。处理内容）

$('body').on('change', '.select-funnel-process', function() {
    var data = {
        type: $('option:selected', this).val()
    } 
    var selectDiv = ($(this)).closest('.funnel-group').find('.process-details')
    selectDiv.append('<option class="added_option" value="THOR"> THOR</option>').prop('disabled', false);
})

https://jsfiddle.net/3k33vunn/

另外，请确保定义了选择器“.funnel-group”。如果不是，它将找不到任何东西。

jQuery没有处理新添加的子元素

1 个答案: