如何防止 AJAX 事件的空触发器？答案

【问题标题】：How do I prevent a null trigger of an AJAX event?如何防止 AJAX 事件的空触发器？
【发布时间】：2012-06-05 20:14:50
【问题描述】：

使用以下 jQuery 代码，我创建了一个更新页面的下拉菜单，但是我相信当它更改 #content 并返回结果时，它会将其计为 change 事件并拉取 #sidebar 信息。

<script>
var get_pages_load_options = { 
    target:        '#content',
    data: {ajaxtype: 'content'},
    beforeSubmit:  function() {
        console.debug('beforeSubmit');
    },
    success: function() {
        console.debug('successful');
    }
};
$("#content").on('change','.get_pages',function(){
    var submit_page = $(this).attr('rel');
    var form_url = $("#"+submit_page).attr('action');
    console.debug(submit_page+" & "+form_url);
    $("#"+submit_page).ajaxForm(get_pages_load_options);
    $.ajax({
        type: "POST",
        url: form_url,
        data: {ajaxtype: "side"},
        success: function(data) {
            console.debug(data);
            $("#sidebar_menu").html(data);
        }
    });
});
</script>

#content的HTML如下：

<div id="content" class="content">
    <h1>Game Updates</h1>
    <form action="/gameplay/updates/" id="submit_page" name="submit_page" class="get_pages" method="post">
        <select name="year" class="get_pages" rel="submit_page">
            <option value="2012">2012 -- v1.7.0 - v2.0.0</option>
            <option value="2011">2011 -- v1.5.3 - v1.6.0</option>
            <option value="2010">2010 -- v1.3.3 - v1.5.2</option>
            <option value="2009">2009 -- v1.1.4 - v1.3.2</option>
            <option value="2008">2008 -- v0.6.0 - v1.1.3</option>
            <option value="2007">2007 -- v0.1.x - v0.5.5</option>
        </select>
    </form>
    /** Update Logs **/
    <br/><br/>
    <p>
        -----------<br />
        Thank you,<br />
        Admin deth4uall
    </p>
</div>

你知道我可以如何防止第二次发生变化吗？谢谢！

编辑：我确实有一个默认的常规版本，上面应该覆盖以下功能：

$("#content").on('change','.get_pages',function(){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).submit();
});

【问题讨论】：

如果您使用的是 jQuery 1.3.2+，请将 livequery 替换为 live。如果您使用 jQuery 1.4+ 将其替换为 api.jquery.com/delegate ，最后，如果您使用 jQuery 1.7+ 将其替换为 api.jquery.com/on 。否则，我们将不得不查看 livequery 的文档。
当我再次开始使用on() 时，只有其他所有选项都会激活 ajax。我正在使用 1.7.2
您是否对.on 委托事件使用了正确的语法？ $("#content").on("change",".get_pages",function(){...});
调试日志中仍然出现submit_page & /gameplay/updates/ jquery.ajax.js:83 和undefined & undefined jquery.ajax.js:83
这没有多大意义......但是，哦，回到 livequery，因为此时它似乎问题最少。您正在更改/替换的 div 中的那个脚本块吗？

标签： jquery ajax onchange

【解决方案1】：

如果值未定义，只需从函数中返回。

$("#content").on('change','.get_pages',function(){
    var submit_page = $(this).attr('rel');
    var form_url = $("#"+submit_page).attr('action');
    if (!submit_page || !form_url) {
        return;
    }
    //console.debug(submit_page+" & "+form_url);
    $("#"+submit_page).ajaxForm(get_pages_load_options);
    $.ajax({
        type: "POST",
        url: form_url,
        data: {ajaxtype: "side"},
        success: function(data) {
            //console.debug(data);
            $("#sidebar_menu").html(data);
        }
    });
});

【讨论】：

谢谢伙计，你今天帮我解决了我遇到的所有问题，学习了很多关于 JavaScript 的知识:)
什么时候 form_url 和 submit_page 不应该抓取内容？
submit_page 从.get_pages select 中获取rel="" 属性，然后使用该属性查找表单的id 以从正在提交的表单中获取action=""。
更改事件根本不应该被触发，除非您使用鼠标或键盘手动触发它，或者通过 javascript。我会从这个角度进行调查。
在应该发生之前，我根本看不到更改事件发生。