Javascript无法使用Ajax [英] Javascript not working with Ajax
问题描述
我在网页中使用ajax加载短代码。我能够加载短代码(基本上由一个滑块组成,当我们将鼠标悬停在滑块上时,会出现不同的图像),但是悬停功能不适用于加载的新滑块。当我将鼠标移到新滑块上时,新图像不会出现。经过一些研究后我发现这是因为在ajax调用之后没有加载JavaScript。我读到某个地方,我将不得不在ajax调用后再次重新听取on-mouse-hover事件。有没有办法在鼠标悬停工作的新滑块上工作?
这是我的PHP代码返回新的滑块:
require_once(' wp-load.php');
echo do_shortcode(' [column_third] [ virtual_slide_box id =842] [/ column_third] [column_third] [virtual_slide_box id =843] [/ column_third] [column_third_last] [virtual_slide_box id =844] [/ column_third_last] [column_third] [virtual_slide_box id =845 ] [/ column_third] [column_third] [virtual_slide_box id =846] [/ column_third] [column_third_last] [virtual_slide_box id =847] [/ column_third_last]');
我正在使用xmlhttprequest来创建一个ajax请求,然后创建一个元素来包含ajax响应并将其附加为原始html文档中的孩子。
有什么可以做的吗?或者有什么方法可以运行在初始页面加载时加载到ajax调用后加载的所有新元素的所有脚本?请保持简单,因为我是这项技术的新手。
你可以使用 jQuery .on [ ^ ]功能javascript对新添加/加载的元素做出反应。
如果这有帮助,请花些时间接受解决方案。谢谢。
( document )。ready( function (){
( your-slider-container)。on( 悬停, 你的滑块选择器, function (){
// your function body
});
});
准备就绪,以便在调用函数之前加载容器。 your-slider-container是所有幻灯片的常见父元素...就像所有元素的父元素一样。你的滑块选择器可以是类,属性,id或任何其他你可以使用CSS的标识符...在这种情况下最常见的类。
I am loading shortcodes using ajax in my webpage. I am able to load shortcodes ( which essentially consists of a slider wherein when we hover over a slider, a different image comes) but the "on-hover" functionality is not working on the new sliders loaded. When i move my mouse over the new slider, new image doesn't come up. I found out after some research that this is due to JavaScript not loading after ajax call. I read somewhere that I will have to re-listen to the on-mouse-hover events again after ajax call. Is there some way I can make on mouse hover work on new sliders?
This is my php code that returns new sliders:
require_once( 'wp-load.php' );
echo do_shortcode('[column_third][virtual_slide_box id="842"][/column_third][column_third][virtual_slide_box id="843"][/column_third][column_third_last][virtual_slide_box id="844"][/column_third_last][column_third][virtual_slide_box id="845"][/column_third][column_third][virtual_slide_box id="846"][/column_third][column_third_last][virtual_slide_box id="847"][/column_third_last]');
I am using xmlhttprequest in order to create an ajax request and then creating a element to include the ajax response and appending it as a child in original html document.
Is there any why it can be done? Or is there any way I can run all the scripts loaded at time of initial page-load onto all the new elements loaded after ajax call? Please keep it simple, because I am new to this technology.
You can use jQuery .on[^] function to make the javascript react to newly added/loaded elements.
If this helps, please take time to accept the solution. Thank you.
(document).ready(function() {
( "your-slider-container" ).on( "hover", "your-slider-selector", function() { // your function body }); });
Ready is needed so that your container is loaded before function call. your-slider-container is common parent element to all your slides...like would be parent for all elements. your-slider-selector can be class, attribute, id or any other identifier which you could use CSS on...most commonly class in this case.
这篇关于Javascript无法使用Ajax的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!