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>

标签： jquery mustache

2条回答

放荡不羁爱自由

2楼-- · 2019-08-25 04:58

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.

0人赞添加讨论(0) 举报

做个烂人

3楼-- · 2019-08-25 05:04

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();

});

0人赞添加讨论(0) 举报

Mustache doesn't handle events properly

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间