0

口ひげを使って、htmlファイルにいくつかのテンプレートを挿入したいと思います。

テンプレート、jqueryコード、およびhtmlコードは、3つの別々のファイルにあります。これは必須の理由です。プロジェクトをできるだけ整理してほしいからです。

'nav'を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

クリックの代わりにオンハンドラーを使用します。次のようになります。

 $(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 に答える