1

可能重复：
jQuery - 有多个 $(document).ready(function() {});
你可以有多个 $(document).ready(function() 部分吗？

这是我唯一的项目 jQuery 文件 

// loading search page
$(function(){
  $("#search").click(function() {
    $("#feature").load("templates/search.html", function() {
        $("#search-input").focus();
        $("#search-input").css({
            "margin-left": "20%",
            "margin-top" : "2%"
        });
    });
 });
});

/* 
finding youtube videos
API source : https://developers.google.com/youtube/2.0/developers_guide_jsonc
*/
$(function(){
    $('#search-input').live('keyup',function() {
        var search_input = $(this).val();
        var keyword = encodeURIComponent(search_input);
        var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=10&v=2&alt=jsonc';

        $.ajax({
          url: yt_url,
          type: 'GET',
          dataType: 'jsonp',
          complete: function(xhr, textStatus) {
            //called when complete
          },
          success: function(response, textStatus, xhr) {
            if(response.data.items) {
                var template = $('#item').clone();
                $('#result').html(template);
                $.each(response.data.items, function(i, data) {
                    //console.log(data)
                    search_data = {
                        'id': data.id,
                        'title': data.title,
                        'views': data.viewCount,
                        'thumbnail': data.thumbnail['sqDefault'],
                    }
                    item = video_result_template(search_data);
                    $('#result').append(item).fadeIn('slow');
                });
            } else {

            }
          },
          error: function(xhr, textStatus, errorThrown) {
            //called when there is an error
          }
        });
    });
});

// filling out the search template
function video_result_template(data) {
    var item = $('#item').clone();
    item.removeClass('hide-item');
    item.find('img').attr('src', data.thumbnail);
    item.find('.title').html(data.title);
    item.find('.views').html(data.views);
    item.attr('id', data.id);
    item.addClass('view-item');
    return item;
}

// playing the video from search result on player pane
$(function(){
    $('.item').live('click', function(){
        // alert(this.id);
        var url = $('#video-frame').attr('src');
        var new_url = url.replace(/embed\/[\w -]*/g, 'embed/' + this.id);
        $('#video-frame').attr('src', new_url);
    });
});

// creating new playlist
$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(e){
            var title = $(e.target).closest('.video-detail').find('.title').text();
            alert(title);
        });
    });

    // $('form .create-playlist-button').live('click', function(e){
    //  var title = $(e.target).closest('.video-detail').find('.title').text();
    //  alert('title');
    // });
        // $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(){
        //          alert($('.title').get(1).textContent);
        //      });

});

// animating slideshow on landing page
$(function(){
    $('#slides').slides({
        preload: true,
        pagination: true,
        preloadImage: '../static/img/loading.gif',
        play: 2000,
        pause: 1000,
        hoverPause: true
    });

    $('.slides_control').css({
        "height": "600px",
        "margin-right": "400px"
    });

    $('.pagination').hide('');
});

问题

  • 这个 jquery 页面有多个 $(function)(意味着当 DOM 准备好时) 函数，这是不正确的吗？鉴于
  • 一些 jQuery 函数适用于不同的页面
  • 一些元素稍后出现在页面上（参见 load() 函数）

这一切如何运作？我不太确定，但这里似乎有问题，这意味着绝对有机会向经常这样做的人学习

PS - 我对 jQuery 领域完全陌生。我一直在努力完成我的第一个项目。

4

2 回答 2

1

YES you can use it in this way without any error, but to make your code more neat and readable you should not repeat the tags un-necessarily.

Note: Variable declared in one function will not be accessible in other functions so you will need to be careful about variable scope in repeating function bodies.

Hope this helps.

于 2012-07-10T14:26:02.377 回答
1

当您使用时，$(function() {..});您实际上会这样做：$(document).ready(function() {..});这是向文档的就绪事件注册一个函数。
您所做的就像将多个功能注册到一个有效且正确的单击事件中。

希望我清楚。

于 2012-07-10T14:21:40.387 回答