单击处理程序未附加

Posted 2023-05-09

【中文标题】单击处理程序未附加

【英文标题】：Click handler not attaching

【发布时间】：2013-06-20 08:14:36

【问题描述】：

小提琴：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');   
                                              
                    );
                );    
             
        );

【参考方案1】：

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

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

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

【讨论】：

fiddle 不起作用...与原始结果相同。关闭“X”不会删除过滤器。除非我遗漏了一些明显的东西......

取消注释您在原始 jsfiddle 中评论的部分怎么样：jsfiddle.net/A4sqY/2

所以，是的，我遗漏了一些明显的东西。该死的。效果很好，非常感谢。所以我理解，委托从父对象（表单）开始，然后将方法应用于元素并运行函数？

你可以在这里找到解释：sitepoint.com/event-delegation-with-jquery

据我所知，您只能将事件绑定到现有元素。