Mustache doesn't handle events properly

问题

I want to use mustache to insert some templates in my html file.

The template, jquery code and html code are in three separate files. This is mandatory cause I want my project to get as much organized as possible.

When I write my 'nav' directly into html file the click event works fine, but if try to insert it with mustache it stops working. Any idea why? Thank you.

test1.php file

<html>
    <head>
        <title>World News</title>       
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
        <script src = "https://raw.github.com/janl/mustache.js/master/mustache.js" type = "text/javascript"></script>
        <style>
            body{
                background-color: #FFFFFF;  
                position: absolute;
                top: 10%;
                left: 15%;
                right: 15%;
            }

            #menu ul li{
                display:inline;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <header>                        
            <section id="menu" class="clear">
                <!-- Insert the 'navigationBar' template -->                                                                                
            </section>                      
        </header>
        <!-- End of header -->

        <script type="text/javascript" src="process1.js">

        </script> 

    </body>
</html>

process1.js

    function Guardian_news(filter, selector, div)
    {   
        this.path = 'fullwindow1.html';
        this.filter = filter;
        this.selector = selector;   
        this.populate = function(){ 
            $.get(this.path, function(templates){
                var template = $(templates).filter(filter).html();
                $(selector).html(Mustache.render(template));
            });
        }

    }

    $(document).ready(function(){
        var  menu;
        menu = new Guardian_news('#navigationBar', '#menu');        

        menu.populate();

        $('#science').click(function(){
    alert('url accessed');
        });


    });

fullWindow1.html

    <script id="navigationBar" type="text/x-mustache-template">             
        <nav>               
            <ul>                
                <li><a id="politics" href="#">Politics</a></li>
                <li><a id="science" href="#">Science</a></li>
                <li><a id="health" href="#">Health</a></li>         
                <li><a id="media" href="#">Media</a></li>
                <li><a id="arts" href="#">Arts</a></li>         
                <li><a id="weather" href="#">Weather</a></li>
                <li><a id="sports" href="#">Sports</a></li>
            </ul>                   
        </nav>                          
    </script>

回答1:

The problem is that you are binding your event handler to the element before it exists because it is still being ajax'ed.

Try including a callback function in Guardian_news and executing it once the ajax is complete - then bind your events within that callback.

EDIT: something like this:

function Guardian_news(filter, selector, div, callback)
{   
    this.path = 'fullwindow1.html';
    this.filter = filter;
    this.selector = selector;   
    this.populate = function(){ 
        $.get(this.path, function(templates){
            var template = $(templates).filter(filter).html();
            $(selector).html(Mustache.render(template));
            callback(); // Call our callback here once the ajax is complete and the template is rendered
        });
    }

}

$(document).ready(function(){
    var  menu;

    var callback = function () {
        $('#science').click(function(){
            alert('url accessed');
        });
    }

    menu = new Guardian_news('#navigationBar', '#menu', callback);        

    menu.populate();

});

回答2:

Use the on-handler instead of click. It would look like this:

 $(document).ready(function(){
        var  menu;
        menu = new Guardian_news('#navigationBar', '#menu');        

        menu.populate();

        $('#menu').on('click', '#science', function(){
            alert('url accessed');
        });
    });

You have to make sure, the element you attach the handler to already exists. With the selector in the call of on you make sure it only handles the specific element.

See this fiddle for more information.

来源：https://stackoverflow.com/questions/14216400/mustache-doesnt-handle-events-properly

标签

jquery

mustache