jquery - Jquery在追加一个函数后调用一个函数
问题描述
I am using a third party to embed the chatbot dynamically using Jquery
This widget is happened in var tag
, below.
I have to call a function PodiumWebChat.open()
which is part of the third-party script. How do I call that function after $('#test').append(tag); //testing
statement.
$(document).ready(function(){
// this code will run when the document has loaded
// and all elements are in place
$("#RequestADemo").click(function(){
// this code will be run when the user clicks on
// the button we created above
$('#default').click(); // this calls the click event on #default
var tag = '<script defer src="https://connect.abc.com/widget.js#API_TOKEN=c0726ce52f4a" id="podium-widget" data-api-token="c0726ce52f4a"><\/script>';
$('#test').append(tag); //testing
}); // close the click handler on #RequestADemo
}); // close the document.ready code block.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="RequestADemo" onClick="$('#default').click()" value="Request A Demo" />
<div id="test"></div>
I tried the following, but it doesn't work
$('#test').append(tag); //testing
PodiumWebChat.open();
解决方案
If you want to access methods, properties, variables and etc. in the external script you are loading, you will need to wait for the external script to be loaded. Simply appending the <script>
element does not guarantee that it is fully loaded after.
Instead of composing a HTML string, you can just create a new <script>
element instead, and set properties using the dot notation or the dataset
property (for the data-api-token
attribute):
const scriptElement = document.createElement('script');
scriptElement.defer = '';
scriptElement.id = 'podium-widget';
scriptElement.dataset.apiToken = 'xxx';
scriptElement.addEventListener('load', () => {
PodiumWebChat.open();
});
scriptElement.src = 'https://connect.abc.com/widget.js#API_TOKEN=xxx';
推荐阅读
- r - 在forestplot中,设置字体,使文本“普通”,不起作用,为什么?
- python - find_elements_by_xpath 递归调用后返回 None
- reactjs - AsyncSelect 不会更改加载消息,也不会更改选项消息(反应选择库)
- python - Redis 返回“无”作为结果
- firebase - componentDidUpdate() 在状态改变时更新,即使不在状态
- php - Laravel 7 中不存在命令“event:cache”?
- flutter - 我无法在 Liquidswipe 中实现 Connectivityresult
- javascript - 如何根据用户输入重新组织而不复制 MongoDB 文档?
- r - R中小于1000的斐波那契数列
- flask - python flask向所有用户广播渲染模板