Question

我正在使用jQuery开发一个小项目，到目前为止一直很好，但我遇到了jQuery的.live（）函数的问题。

在下面的源代码中，您将看到：

colourMenu.children('li').live('click', selectColour);

列表元素通过解析JSON的ajax请求填充到空的UL元素。任何人都可以告诉我为什么它不会应用实时功能？如果它正在工作，它将通过updateOption（）;

的概念更新隐藏的输入字段

注意：在执行selectMaterial方法后调用json请求

(function($) {
    $.fn.juniperNotebooks = function() {

        /*
        == Default
        */

        var ajaxFile = 'notebookAPI.php';
        var nopt = $('#notebookSelectedOpts'); 
        var complete = false;   
        var debug = true;

        /*
        == Attributes
        */  

        // Steps
        var actions = {
            size: false,
            material: false,
            colour: false,
            paper: false
        }

        // Extras
        var extras = {
            emboss: false,
            elastic: false,
            pen: false,
            pocket: false
        }

        // Buttons
        var sizeButton = $('.btn.size');
        var materialButton = $('.btn.material');
        var colourButton = $('.btn.matcolour');

        // Menu's
        var sizeMenu = $('.menu.size');
        var materialMenu = $('.menu.mats');
        var colourMenu = $('.menu.colour');

        init();

        /*
        == Plugin Functions 
        */

        function init() {

            // CSS Opacity for all but the first button
            $('.btn').css('opacity', 0.5).first().css('opacity', 1).addClass('req');

            // Attach refresh function to reset link
            $('.refresh').bind('click', resetPage);

            // Attach click to first button: Size
            sizeButton.bind('click', showSizes);

            // Attach click handlers to options:
            sizeMenu.children('li').bind('click', selectSize);
            materialMenu.children('li').bind('click', selectMaterial);
            colourMenu.children('li').live('click', selectColour);

        }

        /*
        == Plugin Functions 
        */

        /*
        == Menu Selector Functions 
        */

        function showSizes() {              
            delegateActiveButtonState(sizeButton);
            toggleMenu(sizeMenu);                           
        }

        function showMaterials() {
            delegateActiveButtonState(materialButton);
            toggleMenu(materialMenu);       
        }

        function showColours() {    
            delegateActiveButtonState(colourButton);    
            toggleMenu(colourMenu);         
        }       

        /*
        == Additional Menu Selector Functions 
        */

        function toggleMenu(menu) {

            if( menu.is(':hidden') ) {
                menu.slideToggle(500);      
            } else {
                menu.slideToggle(500);
            }       

        }

        function hideMenu(menu) {
            return menu.slideToggle(500);
        }

        /*
        == Option Selector Functions
        */      

        function selectSize() {

            var option = $(this).data('size');  
            delegateActiveButtonState(sizeButton);

            if( !checkComplete() ) {

                updateOption('selectedSize', option);   
                debug__(option+' size has been selected.');

                if( option == 'a4' ) {

                    updateOption('selectedPaper', 'lined'); 
                    debug__('Lined paper has been selected by default.');       

                } else { updateOption('selectedPaper', '');  }

                hideMenu(sizeMenu);
                sizeButton.removeClass('req');

                actions.size = true;

                materialButton.unbind('click', showMaterials).bind('click', showMaterials).css('opacity', 1).addClass('req');

            } else {

                // Do stuff after we have already made a notebook

            }           

        }

        function selectMaterial() {

            var option = $(this).data('matid'); 
            delegateActiveButtonState(materialButton);

            if( !checkComplete() ) {

                updateOption('selectedMaterial', option);   
                debug__('Material ID: '+option+' has been selected.');

                hideMenu(materialMenu);
                materialButton.removeClass('req');

                actions.material = true;

                colourButton.unbind('click', showColours).bind('click', showColours).css('opacity', 1).addClass('req');

                colourMenu.empty();
                getAvailableColours( option );

            } else {

                // Do stuff after we have already made a notebook

            }           

        }

        function selectColour() {

            var option = $(this).data('colourid');  
            delegateActiveButtonState(colourButton);

            if( !checkComplete() ) {

                updateOption('selectedColour', option); 
                debug__('Colour ID: '+option+' has been selected.');

                hideMenu(colourMenu);
                colourButton.removeClass('req');

                actions.colour = true;

                // if for paper selection here..
                //colourButton.bind('click', showMaterials).css('opacity', 1).addClass('req');

            } else {

                // Do stuff after we have already made a notebook

            }           

        }               

        /*
        == Global Functions
        */

        function getAvailableColours(materialID) {

            if( colourMenu.children('li').length == 0) {
                $.getJSON('json.php?mid='+materialID, function(data) {
                  var items = [];

                  $.each(data, function(key, val) {
                    items.push('<li data-colourid="' + key + '">' + val + '</li>');
                  });

                  colourMenu.append(items.join(''));

                });
            }           

        }

        function updateOption(opt, val) {
            return nopt.children('#'+opt).val(val);
        }

        function getOption(opt) {
            return nopt.children('#'+opt).val();
        }

        function resetPage() {
            if( confirm('Are you sure you want to reset this page? All data will be lost.') ) {
                location.reload();
            }
            return false;
        }

        function delegateActiveButtonState(btn) {

            if( !btn.hasClass('active') ) {
               return btn.addClass('active');
            } else { return btn.removeClass('active'); }    

        }

        function checkComplete() {
            if( complete ) {
                return true;
            }
        }

        function debug__(msg) {
            if(debug) {
                console.log(msg);
            }
        }

    };
})(jQuery);

Answer 1

.live() ^[docs]仅适用于选择器：

查找要发送到.live()的元素不支持DOM遍历方法。相反，应始终在选择器之后直接调用.live()方法，如上例所示。

您的代码可能存在其他问题，但这是明确的问题。您应该创建一个http://jsfiddle.net/演示，而不是发布一堆代码并让我们试图弄清楚它是如何工作的。

Answer 2

我想它与checkComplete();有关。该函数正在查看全局变量complete的值。如果该变量已由另一个单击侦听器设置为true，则您的colourmenu代码将不会执行。

jQuery Live功能无法正常工作

2 个答案: