Question

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

模板，jquery代码和html代码分为三个单独的文件。这是强制性的，因为我希望我的项目尽可能多地组织起来。

当我将'nav'直接写入html文件时，click事件工作正常，但如果尝试用胡子插入它就会停止工作。知道为什么吗？谢谢。

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>

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

});

Answer 2

使用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调用中的选择器，您可以确保它只处理特定元素。

有关详细信息，请参阅此fiddle。

Mustache不能正确处理事件

2 个答案: