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屋！