Question

我试图用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>

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

Answer 1

你的非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
});

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

Answer 2

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

这也是您对优先级问题的帮助，因为您可以从同一位置管理所有问题。

Answer 3

你把你的javascript放在哪里（很大程度上）是一种风格选择。就像CSS一样，将javascript放在页面源（内联）或页眉中是最初编写页面的好习惯，但对于生产页面却是不好的做法。

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

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

Answer 4

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

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

  //...Maybe other AJAX code...
});

使用jQuery覆盖默认的javascript功能

4 个答案: