Question

所以我正在尝试使用jquery和ajax并遇到问题。

简而言之，一旦用户通过身份验证并登录，就会创建一个下拉菜单。

Ajax使用正确的菜单选项重写菜单架。问题是它在页面刷新（CTRL + R）时有效，但在ajax重写菜单时却没有。

如果我理解正确这是因为ajax在页面加载后写入（DOM已完成），因为当页面DOM完成加载时菜单和选项不存在（因为用户没有成功登录） jquery找不到新元素？

阅读后我看到这通常是因为.on Click绑定到元素而不是文档？

我现在尝试了一百种组合，但仍然没有成功，所以我要求一些帮助从任何有能力的Jquery大师那里解决这个问题：）

这是代码......（我正在使用jquery 1.10）

<script type="text/javascript">

        function DropDowna(el) {
            this.ddc = el;
            this.placeholder = this.ddc.children('span');
            this.opts = this.ddc.find('ul.dropdownmk > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDowna.prototype = {
            initEvents : function() {
                var obj = this;

                obj.ddc.on('click', function(event){
                    $(this).toggleClass('active');
                    return false;
                });

                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var ddc = new DropDowna( $('#ddc') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-3').removeClass('active');
            });

        });

</script>

HTML

<div id="mmenuoptions">
    <ul>
    <li><a href="#" class="member">My Page</a></li><li><a href="#" class="member">Wish List (0)</a></li><li><a href="#" class="member">Help</a></li></ul>
</div>

HTML被Ajax重写为

<div class="mymenuz">       
    <ul class="cbp-tm-menu">
    <li>        
        <div id="ddc" class="wrapper-dropdown-3" tabindex="1">
            <span>My Menu</span>
                <ul class="dropdownmk">                         
                    <li><a href="#"><i class="icon-profile"></i>Option 1</a></li>                       
                    <li><a href="#"><i class="icon-edit-profile"></i>Option 2</a></li>
                    <li><a href="#"><i class="icon-store"></i>Option 3</a></li>
                    <li><a href="#"><i class="icon-purchases"></i>Option 4</a></li>                     
                    <li><a href="#"><i class="icon-items"></i>Option 5</a></li>                     
                </ul>
        </div>              
    </li>
    <li><a href="#" class="member">Wish List (0)</a></li>
    <li><a href="#" class="member">Help</a></li>
    </ul>
</div>

感谢所有人的帮助，投入和时间。这一直在杀我:(

Answer 1

好吧，经过几个小时的折磨后我自己解决了这个问题，但我想我应该分享答案，以防其他用户遇到类似的问题，在Ajax更新后使用Jquery验证点击控件。

基本上，代码很好（一切都是相对的，而@Archer有一个关于修改Ajax解析的代码的问题）......但是有两个主要问题。

首先，obj.ddc.on（'click'，function（event）{无法触发，因为ddc是在DOM完成后创建的。为了解决这个问题，我将点击事件绑定到文档上，因此承诺会有一个未来的div id称为“ddc”。因此问题的解决方案是

替换

obj.ddc.on（'click'，function（event）{

与

$（document）.on（“click”，“＃ddc”，function（e）{

然后问题二......现在下拉菜单是可点击的并且状态是活动的，它不能保留选择。这也是因为this.placeholder是在Ajax更新之前定义的，并且在加载DOM时不存在span标记。

绕过这两个变化。同样，obj.opts.on（'click'，function（）{需要重新定义，以便在文档级别再次使用ajax注入HTML和点击绑定。

$（document）.on（“click”，“li”，function（）{

然后需要定义占位符。仅通过添加obj.placeholder = $（'。wrapper-dropdown-3＆gt; span'）创建;

所以最后的Jquery

function DropDowna(el) {
            this.ddc = el;
            this.placeholder = this.ddc.children('span');
            this.opts = this.ddc.find('ul.dropdownmk > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDowna.prototype = {
            initEvents : function() {
                var obj = this;
                $(document).on("click", "#ddc", function(e) {
                    $(this).toggleClass('active');
                    return false;
                });

                $(document).on("click", "li", function() {
                /*obj.opts.on('click',function(){*/
                    var opt = $(this);
                    obj.val = opt.text();                       
                    obj.placeholder = $('.wrapper-dropdown-3 > span');
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(document).ready(function() { 

            var ddc = new DropDowna( $('#ddc') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-3').removeClass('active');
            });

})

完美地工作，更重要的是节省了大量时间来重写代码。

感谢@Archer在我的问题中提供反馈。

希望一些逻辑和重写可以帮助任何遭受jquery / ajax更新和无法运行的链接的人。

Answer 2

尝试：

$(document).on('click',function() {
    // all dropdowns
    $('.wrapper-dropdown-3').removeClass('active');
});

ajax刷新后，Jquery下拉菜单无法正常工作

2 个答案: