1

我正在尝试使用 jQuery 在下面的代码中覆盖更改事件的 JavaScript，但是我相信内联 JavaScript 优先于声明的 jQuery 功能。本质上，我正在尝试拥有我的网站的 AJAX 版本，其中包含一个额外的 JavaScript 文件。我需要这个功能在没有额外的 AJAX 版本的情况下仍然可以工作，但我不确定是否应该将它包含在主 JavaScript 文件中，或者像现在一样将它保持内联。任何有关他们的建议和信息将不胜感激！谢谢！

<form action="/cityhall/villages/" method="post" name="submit_village">
    <select name="village" onchange="document.submit_village.submit();">
        <option value=""></option>
    </select>
</form>

我正在尝试使用 jQuery Form Plugin 将帖子提交给 PHP 以处理请求，如下所示：

var bank_load_options = { 
    target:        '#content',
    beforeSubmit:  showRequest,
    success:       showResponse
};
$('form.get_pages').livequery(function(){
    $(this).ajaxForm(bank_load_options);
    return false;
});

我修改了代码如下：

<form action="/cityhall/villages/" method="post" id="submit_village" name="submit_village">
    <select name="village" class="get_pages" rel="submit_village">
        <option value=""></option>
    </select>
</form>

<script>
# main JavaScript
$('.get_pages').live('change',function(e){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).submit();
});

# ajax JavaScript
var bank_load_options = { 
    target:        '#content',
    beforeSubmit:  showRequest,
    success:       showResponse
};
$('.get_pages').live('change',function(){
    var submit_page = $(this).attr('rel');
    $("#"+submit_page).ajaxForm(get_pages_load_options);
    return false;
});
</script>

但是现在它只在我更改它时运行所有其他选项。

4

4 回答 4

3

您的非 ajax 版本也必须是非 jQuery 吗？如果不是，那么我也建议（就像@nnnnnn 所做的那样）你取消 onxyz 属性并在整个过程中使用 jQuery。

正如其他海报所暗示的那样，内联事件是不可取的，应该被取消。

如果您的非 ajax 版本必须使用 onxyz，那么我建议如下：

设置一个变量来存储此版本是否为 ajax（如何确定这取决于您和您的应用程序上下文）：

var is_ajax = true;

然后如果它是一个 ajax 版本试试这个：

$(function(){
    if(is_ajax){     
        //Unbind the change event from the village select box
        $('select[name="village"]').unbind('change');
        //As an extra measure, remove the onchange attribute
        $('select[name="village"]').removeAttr('onchange');
        //Re-bind the click event to execute your new ajax functionality
        $(document).on('change','select[name="village"]',function(){
            //Do ajax stuff for on-change event here
        });
    }
});

因为它位于 jQuery 的 document.ready 函数中，所以这段代码应该在 html dom（及其关联的 onchange 属性）被渲染后触发。因此，我想它会有效地剥离旧事件并重新绑定一个新事件。

演示：

http://jsfiddle.net/foxwisp/hdL5R/

如果您可以取消内联事件，那么我想您希望在初始 javascript 文件中执行此操作：

$(document).on('change','select[name="village"]',function(){
    document.submit_village.submit();
});

然后在您的 ajax 文件中包含以下内容：

$('select[name="village"]').removeAttr('onchange');
$(document).on('change','select[name="village"]',function(){
    //Do ajax stuff here
});

只要两者都在相同的范围和时间范围内，以便它们一个接一个地执行，那么以上应该可以工作。

于 2012-06-05T02:51:49.343 回答
1

将所有 Javascript 放在一个地方（不是一个文件，但不是一半内联，一半在一个文件中）是一种很好的做法，因此我会删除所有内联 Javascript。

这也将帮助您解决优先问题，因为您可以从同一位置管理所有问题。

于 2012-06-05T02:43:24.773 回答
0

放置 javascript 的位置（很大程度上）是一种风格选择。就像 CSS 一样，将 javascript 放在页面源代码（内联）或页面头部是最初编写页面的好习惯，但对于生产页面来说是不好的做法。

话虽这么说，我有点困惑为什么你会加倍你的 onchange 事件。您是否也尝试将 jQuery 用于选择元素？

我不确定内联与单独 javascript 的一般行为是什么，但我敢说，与内联 CSS 类似，页内 javascript 将优先于外部文件。

于 2012-06-05T02:41:04.333 回答
0

在这种特殊情况下，您可以在您的 AJAX 版本中放弃已触发的提交。

$('[name=submit_village]').on('submit', function(e) {
  e.preventDefault();

  //...Maybe other AJAX code...
});
于 2012-06-05T02:45:28.207 回答