変数内の.click（）スコープをJavaScriptのタイミング問題

Question

GoogleトレンドチャートをHTMLドキュメントに追加しようとしています。問題は、私はクリックしたキーワードをつかんで、それをクリックしたキーワードとしてデータを返すことができるようにGoogleのトレンド機能に渡す必要があります。しかし、何らかの理由で私はGoogleのトレンド関数（名前 - TIMESERIES）内の.clickスコープを呼び出すときにだけ私は外部の.clickスコープからこの関数を呼び出す必要があるので、全体のHTMLではなく、グラフを読み込みます。理由はタイミングの問題です。この種のタイミングを見てください。issue solution here私のコードでこのソリューションを実装することはできません。あなたができるなら、それは本当に私を助けます。カテゴリ名に値がないと、文書があるとすぐにこの関数が呼び出されるので、 `時系列（カテゴリ名="「）：ありがとうとして書かれたコードでは、事前に

<script> 
    function TIMESERIES(categoryName) { 
    return trends.embed.renderExploreWidget("TIMESERIES", { 
     "comparisonItem": [{ 
     "keyword": categoryName, 
     "geo": "", 
     "time": "today 12-m" 
     }], 
     "category": 0, 
     "property": "" 
    }, { 
     "exploreQuery": "q=arts&date=today 12-m", 
     "guestPath": "https://trends.google.co.in:443/trends/embed/" 
    }); 
    } 

    var categoryName = ""; 

    $(".SearchMainCategory, .SearchSubCategory").click(function() { 
    categoryName = $(this).find("#Level1CatsName").val(); 
    if (typeof categoryName === "undefined") { 
     categoryName = $(this).find("#Level2CatsName").val(); 
    } 

    // TIMESERIES(categoryName) if i call this function from where then only this function (google trend chart actually) loads and page other contents not loading. so i need to call from outside then it works fine but i cant access "categoryName" variable from ourside. 
    }); 

    TIMESERIES(categoryName); 
</script> 

Answer 1

あなたはすぐにこのようなあなたの関数を呼び出している、ありますロードされる。

クリックハンドラー内にTIMESERIES関数を配置するのは間違いありません。あなたが考えることは、ラッパーのこの種のスクリプト全体をラップすることです。また、

(function() { 
    // This only gets called after the HTML is loaded. 
    // Also be sure that you insert your scripr below its targeted elements. 
    // Then put your code here. 
}) 

- あなたは#level1CatsNameと#level2CatsNameの正確に一つのインスタンスを持つ必要があります。コメントごとに要求されるように、したがって、あなたは、単にラッパーにコードを挿入し、

categoryName = $("#Level1CatsName").val()

に

categoryName = $(this).find("#Level1CatsName").val();

からこれらのラインを短縮することができる（関数（）{}）。あなたのタグはの下にの下に挿入されることを認識することは重要です。

(function() { 
     function TIMESERIES(categoryName) { 
     return trends.embed.renderExploreWidget("TIMESERIES", { 
      "comparisonItem": [{ 
      "keyword": categoryName, 
      "geo": "", 
      "time": "today 12-m" 
      }], 
      "category": 0, 
      "property": "" 
     }, { 
      "exploreQuery": "q=arts&date=today 12-m", 
      "guestPath": "https://trends.google.co.in:443/trends/embed/" 
     }); 
     } 

     var categoryName = ""; 

     $(".SearchMainCategory, .SearchSubCategory").click(function() { 
     categoryName = $("#Level1CatsName").val(); 
     if (typeof categoryName === "undefined") { 
      categoryName = $("#Level2CatsName").val(); 
     } 

     TIMESERIES(categoryName); 
     }); 
})