jQuery 在 AJAX 加载的 DIV 中不起作用答案

【问题标题】：jQuery not working in AJAX loaded DIVsjQuery 在 AJAX 加载的 DIV 中不起作用
【发布时间】：2011-04-17 08:14:43
【问题描述】：

在我的文档的 HEAD 中，我加载了 jQuery.js 以及 blockUI jQuery 插件。

在 PHP 中，我使用常规 AJAX 将其他 PHP 内容加载到 DIV 中。在原始的 PHP 中，jQuery 和 blockUI 插件工作得很好，但是在任何加载 ajax 的 div 中，jQuery 和 blockUI 都完全没有任何作用。没有控制台错误，没有警告 - 什么都没有。

我是一个 jQuery 初学者，我在这个主题上找到的其他文章都无法让我解决这个问题，所以我正在帮助其他人。在我下面的代码中，您会看到我在 live() 上进行了一些尝试...

这是加载到 DIV 中的 PHP 文件的顶部

    <script type="text/javascript"> 
    $(document).ready(function() { 

        $('#crazy').live('click',function() { 
            $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
        }); 

        $('#yes').live('click',function() { 
            // update the block message 
            $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 

            $.ajax({ 
                url: 'wait.php', 
                cache: false, 
                complete: function() { 
                    // unblock when remote call returns 
                    $.unblockUI(); 
                } 
            }); 
        }); 

        $('#no').live('click',function() { 
            $.unblockUI(); 
            return false; 
        }); 

    }); 
</script>

这是来自该 PHP 文件的 HTML（加载到 DIV 中）：

<input id="crazy" type="submit" value="Show Dialog" /> 

<div id="question" style="display:none; cursor: default"> 
        <h1>Would you like to contine?.</h1> 
        <input type="button" id="yes" value="Yes" /> 
        <input type="button" id="no" value="No" /> 
</div>

【问题讨论】：

标签： php javascript jquery blockui

【解决方案1】：

您的文档就绪函数在加载 DOM 时加载，在您的 AJAX 调用完成之前加载。因此，它仅将 .live() 调用应用于 AJAX 调用之前存在的元素。

如果您想对 AJAX 调用加载的内容应用内容，请为 AJAX 指定一个回调函数，以便在加载完成后应用正确的内容。

【讨论】：

您好 Amber 感谢您的回复。我对 jQuery 非常非常陌生，这句话“为 AJAX 指定一个回调函数，在加载完成后应用适当的东西”让我很困惑。那个回调函数会是什么样子？我应该把它放在哪里？
api.jquery.com/jQuery.ajax 查看设置参数中的success 和/或complete 字段。
live事件实际上解决了元素通过AJAX添加到页面的问题-api.jquery.com/live
谢谢你，这让我找到了正确的方向。这也是最简单的事情......我上面的 javascript 加载在包含的 PHP 文件的顶部，而不是在父文件的 HEAD 中加载我的其余 javascript。进行了切换，现在它与 live() 配合得很好

【解决方案2】：

live 版本有什么问题？它仍然默默地失败吗？

会不会是#yes点击事件方法中的AJAX请求失败了？

我已经采用了您的代码并大大简化了on jsfiddle here，它似乎工作正常。 live 的使用没有问题，它应该修复通过 AJAX 插入的元素的事件处理程序。

您是否尝试过仅在事件方法中抛出警报以查看它们是否被调用？

【讨论】：