0

我想使用 mustache 在我的 html 文件中插入一些模板。

模板、jquery 代码和 html 代码位于三个单独的文件中。这是强制性的，因为我希望我的项目尽可能有条理。

当我将我的“导航”直接写入 html 文件时，点击事件可以正常工作，但如果尝试用小胡子插入它，它就会停止工作。知道为什么吗？谢谢你。

test1.php 文件

<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>
4

2 回答 2

1

问题是您在元素存在之前将事件处理程序绑定到元素，因为它仍在被 ajax 处理。

尝试Guardian_news在 ajax 完成后包含一个回调函数并执行它 - 然后在该回调中绑定您的事件。

编辑：是这样的：

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

});
于 2013-01-08T13:59:36.610 回答
0

使用on-handler而不是click。它看起来像这样：

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

        menu.populate();

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

您必须确保将处理程序附加到的元素已经存在。使用调用中的选择器on确保它只处理特定元素。

有关更多信息，请参阅此小提琴。

于 2013-01-08T14:39:14.477 回答