Question

可能重复：
  jQuery - is it bad to have multiple $(document).ready(function() {});
  Can you have multiple $(document).ready(function() sections?

这是我唯一的项目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页面有多个$（函数）（意味着当DOM准备好了）函数，是不正确的？鉴于此
一些jQuery函数适用于不同的页面
某些元素出现在页面的后面（请参阅load（）函数）

这一切如何运作？我不是很确定，但似乎这里有一些错误，这意味着绝对有机会向那些经常做这件事的人学习

P.S - 我绝对是jQuery的新手。我一直在努力完成我的第一个项目。

Answer 1

当您使用$(function() {..});时，您实际执行：$(document).ready(function() {..});，它会为文档的ready事件注册一个函数。
你所做的就像将一些函数注册到一个有效且正确的单击事件。

希望我很清楚。

Answer 2

是您可以通过这种方式使用它而不会出现任何错误，但为了使您的代码更加neat和readable，您不应该不必重复这些代码。

注意： 在其他函数中无法访问在一个函数中声明的变量，因此在重复函数体时需要注意变量范围。< /强>

希望这有帮助。

jQuery：在同一个脚本文件中有多个$（函数）是错误的？

2 个答案: