用jQuery覆蓋默認的javascript功能

我想用jQuery覆蓋下面的代碼中的change事件上的JavaScript，但是我相信內聯JavaScript優先於聲明的jQuery功能。基本上我正在嘗試讓我的站點的AJAX版本包含一個額外的JavaScript文件。我需要這個功能仍然可以在沒有額外的AJAX版本的情況下工作，但我不確定我是應該將它包含在主JavaScript文件中，還是將它保持內聯，就像現在一樣。任何建議和有關他們的信息將不勝感激！謝謝！用jQuery覆蓋默認的javascript功能

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

我試圖使用jQuery的表格插件的帖子提交給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>

但是現在它只在我更改它時運行其他選項。

來源

2012-06-05 OpensaurusRex

請顯示您正在使用（或嘗試使用）「覆蓋」inline'onchange'屬性的代碼。鑑於你正在使用jQuery，我建議不要在'onxyz'屬性中使用任何JS，即使對於非Ajax版本。 – nnnnnn

如果'onchange'中設置的功能被移動到我的主JavaScript文件中，並且隨後聲明ajax文件，它是否會在相同範圍內寫入功能？ – OpensaurusRex

如果您想確定自己「覆蓋」了舊事件，則應該明確解除綁定該事件並重新附加該事件。確保這是在正確的程序中完成的。它將在很大程度上取決於你如何檢測和實現AJAX版本...... –

這是一個很好的做法，將所有的Javascript都放在一個地方（不是一個文件專用，但不是一半內聯，一半放在一個文件中），因此我將刪除所有內聯Javascript。

這也可以幫助您解決優先問題，因爲您可以在同一地點管理它。

來源

2012-06-05 02:43:24 BePatient

我做到了，現在我只能在其他選項上跑步，有什麼想法？檢查上述編輯。 – OpensaurusRex

你把JavaScript放在哪裏（很大程度上）是風格的選擇。就像CSS一樣，將JavaScript放在頁面源代碼（內聯）或頁面頭部是開始編寫頁面的好習慣，但對於生產頁面來說是不好的做法。

這就是說，我有點困惑，爲什麼你會加倍你的onchange事件。你是否也想爲select元素使用jQuery？

我不確定內聯vs單獨的javascript的一般行爲是什麼，但我敢說，類似於內聯CSS，頁內JavaScript將優先於外部文件。

來源

2012-06-05 02:41:04 abehrens

在這種特殊情況下，您可以在您的AJAX版本中放棄已觸發的提交。

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

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

來源

2012-06-05 02:45:28

此外，對於這樣的事情，它可能是值得尋找像骨幹 –

您的非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-05 02:51:49

框架我已經取消了onxyz和取代它與jQuery如上所示。主版本的功能非常棒，但是ajax版本只接受其他所有更改選項。 – OpensaurusRex

你使用的是什麼版本的jQuery？您的可能不支持.on（）方法。如果你沒有最新的，或許試試$（'select [name =「village」]'）。live（'change'，function（）{ }） –

我正在使用jQuery最新的 – OpensaurusRex

用jQuery覆蓋默認的javascript功能

回答

相關問題