Question

现在，我使用jQUery(document).ready将javascript“注入”div。

一切都很好 - 但问题是 - 通过AJAX刷新相同的div - 在这种情况下JS不会被“重新注入”..

（如果有人感兴趣 - div实际上是“wordpress中的小部件”小部件管理员“区域”

我的问题是jQuery(document).ready显然不起作用（DOM已经“准备就绪”），当我尝试jQuery('#divname').ready时 - 我也无法使其正常工作。

我甚至试过.ajaxComplete()，但无济于事......

我不确定这是一般方法问题还是特定WP小部件问题..

编辑我 - 对于热门请求：我的脚本： - ）

//php wrapper function here ...

// .. php stuff.

    return "

    <script type='text/javascript'>
var map;
var markersArray = []; // to be used later to clea overlay array
jQuery(document).ready(function() {
    var lat = ". $lattxt . " ; // .. php variable.
    var lon = ". $lontxt . " ; // .. php variable.
    var marker;
    // ...continue boring google map code 
    };
    map = new google.maps.Map(jQuery('#DivName')[0], myOptions);
   // ...tinue boring google map code 

    function placeMarker(location) {
       ///...continue boring google map code 
        }
    }

});</script>
    <div id='DivName' style='height:200px; width:100%;' ></div><br />
    ";

我实际上在做的是创建一个DIV并启动谷歌地图。问题是当这个“小部件”（或“div”）通过AJAX“保存”选项并刷新时 - Javascript无法正常工作（它被注入代码 - 但不是“启动......”

正如我之前所说的 - 这个方法在“第一次”开始时运行得很好 - 但是如果div正在刷新 - 它就不再工作了，即使div存在并且javascript也在那里......

编辑1：

我发现以下链接可能会或可能不会帮助任何有类似问题的人：

对可能解决方案的问题的简短解释： http://www.johngadbois.com/adding-your-own-callbacks-to-wordpress-ajax-requests/

两个相关问题：

markItUp for Wordpress widget

jQuery Functions need to run again after ajax is complete

话虽如此 - 我还没能解决我的具体问题。如果我愿意，我会发布完整答案。

Answer 1

我不确定您可以使用的WP回调，但是处理这些类型情况的纯jQuery方法是将事件处理委托给最接近的包含HTML元素永远不会刷新

曾经有过“.delegate（）”，但在最近的版本中你可以使用：

$('#nearest-stable-container').on("click", ".widget", function(){...});

因为处理程序附加到永远不会离开DOM的东西，所以对“.widget”的更改会持续存在。

Answer 2

我相信你想要DOM突变事件。只要DOM发生变化，这些就会触发。

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

具体而言，DOMSubtreeModified，但浏览器支持有限。

有一个jQuery插件可能有所帮助：

https://github.com/jollytoad/jquery.mutation-events

然而，有关您实际尝试完成的内容的更多细节可能会有所帮助。可能有一种更简单的方法可以做你想做的事。

修改：

如果我现在明白了（并且仍然不完全清楚），您将这个javascript注入到您的div中，但它没有运行，因为代码正在等待jQuery(document).ready()。

如果是这种情况，您应该能够：

删除jQuery(document).ready()包装器，您的代码将在加载后立即运行，但可能会在初始加载时出现问题。

重新格式化您的代码，以便在AJAX加载后调用您的函数：

var map; var markersArray = []; // to be used later to clea overlay array function doMap() { var lat = ". $lattxt . " ; // .. php variable. var lon = ". $lontxt . " ; // .. php variable. var marker; // ...continue boring google map code }; map = new google.maps.Map(jQuery('#DivName')[0], myOptions); // ...tinue boring google map code function placeMarker(location) { ///...continue boring google map code } } }; jQuery(document).ready(function() { doMap(); }); </script>

然后在重新加载后调用doMap()。当然，这是一个猜测。

Answer 3

我遇到了完全相同的问题（在WordPress中），并且我认为我会与其他可能遇到此问题的人分享我的答案。

为了在保存小部件后让我的脚本工作，我使用了以下代码：

$(document).ajaxComplete( function() { /* do code here */ });

单击保存后会触发此操作。希望这可以帮助别人！

正在刷新div时的Jquery事件

3 个答案: