イベントにスクリプトを読み込んで同じイベントをトリガーする

Question

イベントに特定のjavascriptファイルを追加しようとしています。私はJavascriptを使用して同じイベントで使用しようとしていますが、これはトリガされた場合のみです。これは、スクリプトがページの読み込みを遅くしているため、スクリプトが必要ないためです。

スクリプトをフッタに移動してすべて設定することができますか、必要に応じてロードするか、代わりにイベントトリガを使用して文法的にプロを実行できますか？以下は、私がこれまで持っているものです。

HTML：

<a id="customId" href="#myLink"></a> 

Javascriptを：

$(document).ready(function() { 
    //The async addition 
    var myJS = { 
     lazyload : function(scriptSrc) { 
      if(!this.isPresent(scriptSrc)){ 
       var scriptTag = document.createElement('script'); 
       scriptTag.src = scriptSrc; 
       scriptTag.async = true; 
       document.getElementsByTagName('head')[0].appendChild(scriptTag); 
      } 
      return false; 
     } 
    }; 

    //The event trigger needs to do something using the said script 
    if($('#customId')){ 
     //Approach 1: 
     var mapEl = document.getElementById("customId"); 
     mapEl.addEventListener("click", customEventHandler, false); 
     //mapEl.dispatchEvent(event); 
       //*where 
       customEventHandler : function(e){ 
        e.preventDefault; 
        myJS.lazyload('/jsfile.js'); 
       // Update or use link relative #href (not complete path) and use the javascript without navigating out of page. 
        //e.currentTarget.dispatchEvent(?); 
      }  

     //2nd attempt: Adds the script, but not able to trigger event to use JS 
     $('#customId').click(function(event) { 
      event.preventDefault(); 
      myJS.lazyload('/jsfile.js'); 
     //Either approach: 
     //Trigger the custom event to do an actual click after doing the lazy load, using the JS file 
(click); $('#customId').trigger('click'); //Is this correct on same element ID 

     }); 

    } 

} 

Answer 1

再帰的にネイティブclickイベントハンドラを呼び出す防ぐためにカスタムイベントを定義script要素のonloadイベントを、使用してみてくださいon要素

$(document).ready(function() { 
    //The async addition 
    var myJS = { 
    lazyload: function(scriptSrc, id, type) { 
     // use `.is()` to check if `script` element has `src` 
     // equal to `scriptSrc` 
     if (!$("script[src='"+ scriptSrc +"']").is("*")) { 
     var scriptTag = document.createElement("script"); 
     scriptTag.src = scriptSrc; 
     scriptTag.async = true; 
     // use `script` `onload` to trigger custom event `customClick` 
     scriptTag.onload = function() { 
      $(id).trigger(type) 
     }; 
     document.getElementsByTagName("head")[0].appendChild(scriptTag); 
     } 
     return false; 
    } 
    }; 

    $("#customId").on("click", function() { 
    myJS.lazyload("jsfile.js", "#" + this.id, "customClick"); 
    }) 
    // do stuff at `customClick` event 
    .one("customClick", function(e) { 
    customClick(e.type) 
    }); 

}); 

plnkr http://plnkr.co/edit/Rw4BRAfSYlXXe5c6IUml?p=preview