单击处理程序未附加

Question

小提琴：http://jsfiddle.net/A4sqY/

修改了一些在 SA 上找到的用于克隆搜索过滤器的代码。尝试将搜索过滤器块添加到 jQMobile 应用程序，代码似乎正确，不确定为什么它只在第一个实例上触发，似乎无法绑定到动态创建的搜索过滤器克隆。

<div data-role="collapsible" data-theme="d" data-collapsed-icon="search" data-expanded-icon="search" class="ui-icon-nodisc" data-iconshadow="false">
    <h3>Search</h3>
        <form action="" id="search" method="POST" novalidate="novalidate">
            <div class="js-selectblock">
                <div class="js-select">
                    <select name="select2[]" class="mySelect" >
                        <option value="1" selected="selected" > Search1</option>
                        <option value="2" >Search2</option>
                        <option value="3" >Search3</option>
                    </select> 
                    <span class="closeselect">X</span>
                </div>
                </div>
                    <input type="submit" value="submit">
                <div id="addmore">
                    Add another filter
                </div>
            </form>
        </div>

克隆按预期进行，删除过滤器仅绑定到初始过滤器。

$(function(){
            $('#addmore').on('click', function(){
                if($('.closeselect').length < $('.js-select:first option').length) {
                    $('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock');   

                    $('.mySelect:not(:last) > option:selected').each(function () {
                        var disableOption = $(this).val();
                        $('.mySelect:last > option').each (function () {
                            if (disableOption === $(this).val()) {
                               $(this).attr('disabled', 'disabled');   
                            }                      
                        });
                    }); 
                    $('.mySelect:last > option:not(:disabled):first').attr('selected', 'selected');
                    disableSelectedOption();               
                }

                if($('.closeselect').length >= $('.js-select:first option').length) {
                    $('#addmore').hide();
                }  
            }); 
            $('.closeselect').on('click', function(){
                console.log('close click');
                // if($('.closeselect').length > 1) {
                //     console.log('close click');
                //     $(this).parent().remove(); 
                //     disableSelectedOption();
                //     $('#addmore').show();
                // }                   
            });
            $('.mySelect').on('change', function () {
                disableSelectedOption();
            });

            function disableSelectedOption() {
                $('.mySelect > option').each(function () {
                   $(this).removeAttr('disabled'); 
                });
                $('.mySelect > option:selected').each(function () {
                    var disableOption = $(this).val();
                    $('.mySelect > option:not(:selected)').each (function () {
                        if (disableOption === $(this).val()) {
                           $(this).attr('disabled', 'disabled');   
                        }                      
                    });
                });    
            } 
        });

Answer 1

您必须对动态添加的内容使用委托：

http://jsfiddle.net/A4sqY/1/

 $('form').on('click','.closeselect', function(){...});
 $('form').on('change','.mySelect', function () {...});