js 加载页面中的 Javascript(和 ajax)事件处理程序

Question

看起来这应该是我的一个非常简单的疏忽，但我只能找到处理这个问题的一个方面的文章，而不是组合。

1) 我有一个 index.php 页面作为网站的 anchor ，并且使用下面的 javascript 加载其他“页面”(本质上不同的内容加载到容器中):

$(document).ready(function() {
    $('#content').load('resources/wxCurrent.php');
    // Navigation content load
    $('#navigation a').click(function() {
        var page = $(this).attr('href');                         
        $('#content').load('resources/' + page + '.php');       
        return false;
    });
});

这工作正常。

2) 我希望在通过 1) 调用的页面中定义的元素上执行额外的 javascript(最终是对 php 页面的 Jquery/ajax 查询)。为了进行测试，我在 php 页面上设置了一个简单的表单:

<form name="adminCmdForm" id="adminCmd" method="post" action="resources/admin.php">
<input type="text" name="authcode" placeholder="Auth Code" />
<input type="text" name="command" placeholder="Command" />
<input type="submit" value="runAdminCmd" />
</form>

并且可以在使用 1) 中的 javascript 调用时访问此表单。然后，我为表单的提交事件创建了一个简单的事件处理程序:

$('#adminCmd').submit(function() {  
    alert('1');
});

如果我直接访问表单所在的 php 页面，我可以触发此事件处理程序并触发警报(如果我在 php 页面中包含标签)。

问题:-当我在 1) 中使用 javascript 加载器调用页面，然后尝试提交表单时，php 直接加载，并且事件处理程序似乎未触发。

我尝试过不同的形式来玩这个 - 但我承认我的 JavaScript 技能很差。我假设我的事件处理程序需要更改以适应事件是从不同对象内触发的事实，但甚至无法确定这是否可能。

为了清楚起见: index.php -> wxInfo.php(包含表单)加载到容器 div -> 表单提交 -> admin.php

预先感谢您对相关文档/教程的任何帮助或指导。

Answer 1

感谢上面提供的指针，我已经解决了问题并扩展了函数以利用有效的 ajax 调用。我曾希望找到一个更优雅的解决方案来解决这个问题，所以任何指示都会很棒。

1) index.php 文件 - 包含主要 div 和站点布局等，以及对查询和我自己的 javascript 文件的引用

2) myNav.js - 我自己的 javascript 文件，包含以下内容:

$(document).ready(function() {
    $('#content').load('resources/wxCurrent.php');
    // Navigation content load
    $('#navigation a').click(function() {
        var page = $(this).attr('href');
        $('#content').load('resources/' + page + '.php');
        return false;
    });
});

这处理导航调用

3) (a)page.php - 包含表单和 JavaScript，如下

<div id="adminInterface">
    <h4>Admin interface</h4>
    <div id="adminCmds">
        <form name="adminCmdForm" id="adminCmd" method="post" action="resources/admin.php">
        <input type="text" name="authcode" placeholder="Auth Code" />
        <input type="text" name="command" placeholder="Command" />
        <input type="submit" value="runAdminCmd" />
        </form>
    </div>
    <h4>Results</h4>
    <div class="adminResponse"></div>
</div>
<script>
$(document).ready(function() {
    $.getScript('scripts/wxInfo.js');
});
</script>

使用建议的ready()等待DOM加载，然后使用.getScript()调用

4) wxInfo.js - 包含表单事件处理程序的 Javascript 文件:

var res = {
    adminloader: $('<div />', { class: 'loader' }),     
    admincontainer: $('.adminResponse')             
}
// Event Handler 
$('#adminCmd').submit(function() {                              
    $.ajax({                                                
        url: 'resources/admin.php',                 
        beforeSend: function() {                    
            res.admincontainer.append(res.adminloader); 
        },
        success: function(data) {       
            res.admincontainer.html(data);      
            res.admincontainer.find(res.adminloader).remove();
        }
    });
    return false;
});

这一切都运行良好。

我不明白为什么导航继续工作，不管我的事件处理程序发生了 war - 鉴于这也是由 javascript 驱动的，我无法理解其中的区别，可能是因为我认为在服务器端(php)术语中而不是比在这些事件驱动的结构中

我希望将我的网站的所有 javascript 包含在一个 js 文件中，但是如果我使用相同的 js 文件，则 content.load 默认事件总是会触发。

有什么建议可以让它变得更优雅吗？

感谢您在这方面的帮助。