Question

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

1）我有一个index.php页面作为网站的锚点和其他页面＆＃39; （使用下面的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调用时访问此表单。然后，我为表单的submit事件创建了一个简单的事件处理程序：

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

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

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

我尝试过不同形式的游戏 - 不过我承认我的javascript技能很差。我假设我的事件处理程序需要更改以满足事件从不同对象中触发的事实，但甚至不能确定这是否可行。

清晰度： index.php - ＆gt; wxInfo.php（包含表单）加载到容器div中 - ＆gt;表单提交 - ＆gt; 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;
});

这一切都很好。

我不明白为什么导航继续工作而不管我的事件处理程序发生了什么战争 - 鉴于这也是由javascript驱动的，我无法理解其中的差异，可能是因为我认为在服务器端（php）条款而不是比在这些事件驱动的构造中

我想在一个js文件中为我的网站提供所有javascript，但是如果我使用相同的js文件，则会触发content.load默认事件。

有什么建议让这更优雅吗？

感谢您对此的帮助。

Answer 2

您可以使用complete功能.load()回调的自定义事件。

在下面考虑一下，你只能在你在页面上插入的新HTML完成加载后插入到DOM中运行你的脚本，想想就像你的内容jquery .ready事件一样

在＆＃34; resources / page.php＆＃34;您更改脚本以使用自定义事件，让我们将其命名为contentready：

<script>
$(document).one('contentready', function(){
$('#adminCmd').submit(function() {  
    alert('1');
});
});
</script>

然后您稍微更改主页加载内容代码：

   $('#navigation a').click(function() {
        var page = $(this).attr('href');                         
        $('#content').load('resources/' + page + '.php', function(){
               //trigger your customer event now that your HTML is loaded in the page
              $(document).trigger('contentready');
        });       
        return false;
    });

这样，只有在新的HTML完全加载到页面DOM中时，才会附加新的事件处理程序。

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

2 个答案: