jQuery无法在AJAX加载的DIV中工作

时间:2010-09-26 06:17:57

标签: php javascript jquery blockui

在我的文档的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> 

2 个答案:

答案 0 :(得分:5)

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

如果要将内容应用于AJAX调用加载的内容,请为加载完成后应用正确内容的AJAX指定回调函数。

答案 1 :(得分:2)

使用live版本会遇到什么问题?它是否仍然无声地失败?

#yes点击事件方法中的AJAX请求是否可能失败?

我已经使用了你的代码并对它进行了简化on jsfiddle here,它似乎工作得很好。使用live没有问题,它应该修复通过AJAX插入的元素的事件处理程序。

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