Javascript 从Handlebar模板中的某些单击事件调用时未定义JS函数

Javascript 从Handlebar模板中的某些单击事件调用时未定义JS函数,javascript,jquery,handlebars.js,Javascript,Jquery,Handlebars.js,我不明白为什么函数goToProfile(otherUserId)只是在某些时候“未定义” 例如,在页面上,我有一个指向某个用户的链接,该用户通过使用“.userProfileLink”单击事件可以正常工作 <%= link_to image_tag(user.avatar.url(:medium)), "/profile/#{user.id}/view", class: "userProfileLink", :"value" => user.id, remote: true %&

我不明白为什么函数goToProfile(otherUserId)只是在某些时候“未定义”

例如,在页面上,我有一个指向某个用户的链接,该用户通过使用“.userProfileLink”单击事件可以正常工作

 <%= link_to image_tag(user.avatar.url(:medium)), "/profile/#{user.id}/view", class: "userProfileLink", :"value" => user.id, remote: true %>
user.id,远程:真%>
然后单击#requestMeeting,它将呈现此把手模板:

<script id="request-meeting-form" type="text/x-handlebars-template">


    <form id="requestMeetingForm">
        <div class="form_section">

            <h4 style="text-align:center;">Request 1 Hour Meeting</h4>
            <br>
            <div class="wrapper_input col_8_of_16">

                <h4 class="label_standard">Date</h4>

                <input type="text" id="meeting_date" class="input_standard datePicker" onfocus="this.blur()"></input>

                <input type="hidden" id="alt_meeting_date" class="input_standard datePicker"></input>

            </div>

            <div class="wrapper_input col_4_of_16">

                <h4 class="label_standard">Start Time</h4>          
                <input type="text" id="meeting_time" class="input_standard time_picker" onfocus="this.blur()"></input>

            </div>


        </div>

        <div class="form_section">


        <div class="wrapper_input">
            <a href="#" type="button" id="suggestedLocations" class="btn_secondary" >Find a place to meet <svg class="chat"><use xlink:href="#map"/></use></svg></a>
        </div>
            <br>
            <div class="wrapper_input col_8_of_16">
                <input type="text" name="location" id="locationField" placeholder="Location Name" class="input_standard" ></input>
            </div>{{!--  
            --}}<div class="wrapper_input col_8_of_16">
                <input type="text" name="location_address" id="addressField" placeholder="Location Address" class="input_standard"></input>
            </div>


            <input type="hidden" id="currentUser"></input>


        </div>

            <div id="mapLocation">

        </div>
       **************** IMPORTANT PART *********************

        <div class="form_section submit_cancel">
             <div class="wrapper_input cancel" >
                <a href='#' class="link_cancel" id="goToProfile" value={{userId}}>Cancel<svg class="meeting_cancel"><use xlink:href="#circleClose"/></svg></a>
             </div>

           ********************************************
            <div class="wrapper_input submit">
               <div class="actions">
                <button type="submit" class="btn_primary" id="requestMeetingButton" >Request Meeting <svg class="" ><use xlink:href="#sendPlane"/></svg></button>
               </div>

            </div>
        </div>
    </form>


</script>

要求1小时的会议

日期 开始时间
{{!-- --}} ****************重要部分********************* ******************************************** 请求会议
当我尝试在上面的模板中再次调用goToProfile时,我得到一个错误,即没有定义goToProfile

application.js:

$(document).on('click', '#goToProfile', function(e) {
        e.preventDefault();
        var value = $(this).attr('value')
        var otherUserId = parseInt(value);
        $('#profileSection').empty();
        goToProfile(otherUserId);
});


var ready;

ready = function(){


        var currentUserId;
        getCurrentUser().done(function() {
              var currentUserId = currentUserId
        });

        $('.userProfileLink').click(function(e) {
            var value = $(this).attr('value')
            otherUserId = value;
            goToProfile(otherUserId);

        });



        var profileSource = $("#user-profile").html();
        var compiledProfile = Handlebars.compile(profileSource);

        var languageSource = $("#languages").html();
        var compiledLanguage = Handlebars.compile(languageSource);
        var language = ""

        var currentUserId;

        var goToProfile = function(otherUserId) {
            $.ajax({
                url: '/get_user',
                type: 'GET',
                data: {otherUserId: otherUserId},
                success: function(user) {
                     var profileInfo;
                     getUserImage(otherUserId).done(function()  {
                        var profileInfo = {
                            first_name: user.first_name,
                            location: user.location,
                            bio: user.bio,
                            nationality: user.nationality,
                            userId: user.id,
                            userImage: userImage,

                        };
                     var profileTemplate = compiledProfile(profileInfo);
                     $('.yieldedInfo').empty();
                     $('.yieldedInfo').append('<div class="profileContainer">' + profileTemplate + '</div>');
                     });

                    getLanguagesUsers(user.id);

                    $('#requestMeeting').click(function(e)  {
                        e.preventDefault();
                        requestMeetingForm(this.value);

                    });
                },
                error: function(err)    {
                    console.log(err);
                }
            });

         };



         var getLanguagesUsers = function(userId)   {
                $.ajax({
                        url: '/user_languages',
                        type: 'GET',
                        data: {userId: userId},
                        success: function(languages)    {
                            for(var i=0; i<languages.length; i++)   {

                                if(languages[i].level != 5) {
                                     var id = languages[i].language_id
                                     var langUrl = '/languages/'+id;
                                      $.getJSON(langUrl, function(lang) {
                                        var language = lang.language

                                        var languageInfo = {
                                            language: language
                                        };
                                        var languageTemplate = compiledLanguage(languageInfo);
                                        $('#learningLanguages').append(languageTemplate);

                                     });

                                } else {
                                    var id = languages[i].language_id;
                                    var langUrl = '/languages/'+id;
                                    $.getJSON(langUrl, function(lang)   {
                                        var language = lang.language
                                        var languageInfo = {
                                            language: language
                                        };
                                        var languageTemplate = compiledLanguage(languageInfo);
                                        $('#fluentLanguages').append(languageTemplate);
                                     });
                                };
                            };

                        },
                        error: function(err)    {
                            console.log(err);
                        }
                     });
        };




};

$(document).ready(ready);
$(document).on('page:load', ready);
$(文档).on('click','goToProfile',函数(e){
e、 预防默认值();
var value=$(this.attr('value'))
var otherUserId=parseInt(值);
$('#profileSection').empty();
goToProfile(otherUserId);
});
var-ready;
ready=函数(){
var-currentUserId;
getCurrentUser().done(函数()){
var currentUserId=currentUserId
});
$('.userProfileLink')。单击(函数(e){
var value=$(this.attr('value'))
otherUserId=值;
goToProfile(otherUserId);
});
var profileSource=$(“#用户配置文件”).html();
var compiledProfile=handlebar.compile(profileSource);
var languageSource=$(“#语言”).html();
var compiledLanguage=handlebar.compile(languageSource);
var language=“”
var-currentUserId;
var goToProfile=函数(otherUserId){
$.ajax({
url:“/get_user”,
键入:“GET”,
数据:{otherUserId:otherUserId},
成功:功能(用户){
var profileInfo;
getUserImage(otherUserId).done(函数()){
var profileInfo={
first\u name:user.first\u name,
位置:user.location,
bio:user.bio,
国籍:user.national,
userId:user.id,
userImage:userImage,
};
var profileTemplate=compiledProfile(profileInfo);
$('.yieldedInfo').empty();
$('.yieldedInfo')。追加(''+profileTemplate+'');
});
getLanguagesUsers(user.id);
$('#requestMeeting')。单击(函数(e){
e、 预防默认值();
requestMeetingForm(此值);
});
},
错误:函数(err){
控制台日志(err);
}
});
};
var getLanguagesUsers=函数(用户ID){
$.ajax({
url:“/user\u languages”,
键入:“GET”,
数据:{userId:userId},
成功:函数(语言){

对于(var i=0;i您可以通过将click事件处理程序绑定到与它需要调用的函数相同的作用域级别来完成所需的操作

var ready = function(){

    $(document).on('click', '#goToProfile', function(e) {
        e.preventDefault();
        var value = $(this).attr('value')
        var otherUserId = parseInt(value);
        $('#profileSection').empty();
        goToProfile(otherUserId);
    });

    // the rest of your ready function goes here

};

如果这样做,那么事件处理程序就可以访问
goToProfile
函数,因为它们都在
ready
函数中。该函数之外的任何东西都不能访问其中的私有方法。

编程真的不好,但是:
window.goToProfile=function(otherUserId)
您需要将事件处理程序绑定到同一作用域级别的函数,而不是通过内联处理程序。@Archer抱歉,我是javascript新手。我该怎么做?谢谢您的解释!!这很有效,我现在明白了“同一作用域级别”的含义。没问题-很高兴能提供帮助:)