SPFx - JavaScript 函数未触发答案

【问题标题】：SPFx - JavaScript function not firingSPFx - JavaScript 函数未触发
【发布时间】：2018-06-21 13:52:54
【问题描述】：

我在 Web 部件的 render() 方法上组装了一个幻灯片组件，它显示正常，但激活幻灯片所需的 Javascript 操作 "ShowSlide()" 没有在内部触发$().ready()

我已经把电话放在了

public render(): void {  
  this.domElement.innerHTML = `
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function() 
            ShowSlide();
        });
      </script>
  `;
}

我已经没有想法了，我不知道是什么阻止了函数被触发，我添加了一个小按钮来手动调用这个函数，当它被按下按钮调用时它可以工作，但不是在预期的 $().ready()

public render(): void {  
  this.domElement.innerHTML = `
      <!-- manual call for ShowSlide() -- it works when clicked! -->
      <input type="button" value="Start Slide" onClick="ShowSlide()"  />
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function()
            ShowSlide();
        });
      </script>
  `;
}

【问题讨论】：

你正在设置元素的innerHTML;虽然这确实将脚本放在 DOM 中，但实际上并没有运行它。
哦！我c你在说什么......这是我熟悉的用于创建HTML内容以组装幻灯片的唯一地方（这可行）......但是说到你的意思，我应该去哪里使用我的功能/幻灯片工作吗？
我根本不知道 SPFx 是如何工作的，但我想您可以简单地将脚本移动到您定义了 ShowSlide 的任何地方？
嘿，克里斯，我在 SPFx 中调用的函数来自外部位于项目“jquery.slide.js”中的脚本 - 我正在处理函数的触发，我可以从调用函数
抱歉问，但我假设您确实包含了 jQuery？

标签： javascript typescript sharepoint-online spfx

【解决方案1】：

我找到了解决问题的方法！我通过在 HEAD 中创建元素来了解如何添加脚本，所以我所要做的就是：

  public render(): void {

    this.domElement.innerHTML = this.htmlContents;

    let head: any = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";

    try {
        script.appendChild(document.createTextNode(this.htmlScript));
    } 
    catch (e) {
        script.text = this.htmlScript;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);               
  }

我希望这可以帮助任何面临同样问题的人，我花了 4 天的时间进行研究、谷歌搜索、阅读我所能阅读的所有内容，直到我在博客上找到一篇关于在 SPFx 中调用 Azure 函数的文章，从那里我可以得到连接点并解决我的问题的灵感！

【讨论】：

像魅力一样工作！很有帮助！