Я думаю, это потому, что вы устанавливаете события на <div/>, а не <select/>.
$("#opt_29821_746").live('change', function(){
должно быть
$("#option_29821_746").live('change', function(){
Кроме того, у вас есть проблема с тем, что ваш обратный вызов AJAX сбрасывает все поля, потому что он просто устанавливает HTML-код, возвращаемый после заполнения поля, поэтому даже если код работает, он будет сбрасываться каждый раз. Подумайте о возврате простого списка (JSON будет моим выбором) и настройке параметров на стороне клиента, а не на рендеринге на стороне сервера.
В качестве альтернативы, если вы настаиваете на использовании AJAX как есть, рассмотрите возможность отложить запрос AJAX до тех пор, пока вы не заполните поле (сначала заполните поле, а затем запрос AJAX). Я предполагаю, что это встроенный onclick, который вызывает AJAX. Так как это уродливо, я не буду бояться сделать его уродливым - вы можете сохранить onclick в стороне как данные jQuery и поместить его в следующую строку:
$('select[onchange]').each(function(i, el) {
el=$(el);
el.data('onchange', el.attr('onchange')); // save previous event code aside
el.attr("onchange",null); // delete previous event code
el.change(function() {
// you can actually add more code here to invoke before regular 'onchange' event
var target=$(this);
if (target.data("onchange")) {
(new Function(target.data("onchange"))).apply(this, arguments); }
});
});
Однако вам нужно будет делать это после каждого вызова AJAX, когда ваши элементы заменяются. Вы также можете использовать jQuery live() и здесь, но мне это неприятно писать.
Что касается первого пункта, я думаю, что использование именованных переменных избавило бы вас от проблем. Для краткости, вот как я рекомендую вам пойти:
(function() {
// this isn't really ids but css selector; but for lack of a better name
var el_id_map = {
sku1: "#option_29821_746",
sku2: "#option_29821_754",
length: "#option_29821_753"
};
var el_ids = []; var sku_id="#option_29821_798";
var sku1_map = { "3134": "TB", "3135": "LT" },
sku2_map = { "3111": "LC", "3110": "LCA" };
// map ids to array
for (var key in el_id_map) {
if (el_id_map.hasOwnProperty(key)) el_ids.push(el_id_map[key]);
}
$(el_ids.join(",")).live("change", function(){
$(sku_id).val([
sku1_map[$(el_id_map["sku1"]).val()],
sku2_map[$(el_id_map["sku2"]).val()],
$(el_id_map["length"]).val()].join(""));
});
})()
Вы можете поместить код в обработчик live() здесь, в первом коде, который я сделал, где я разместил комментарий add more code here и т. Д. Но помните, что вы должны убедиться, что код запускается после каждого AJAX-запроса на обновление события обработчики.
Опять же, я просто вернул бы JSON с сервера.
Редактировать , так как я уже приложил усилия, я решил сделать полный, рабочий пример. Должен работать как есть на вашей странице, но вам нужно отладить его:)
(function() {
// you might want to generate the list using the same
// server-side data that generates the elements
var el_id_map = {
sku1: "#option_29821_746",
sku2: "#option_29821_754",
// put rest of skus here
length: "#option_29821_753"
};
var sku_id = "#option_29821_798";
var sku1_map = { "3134": "TB", "3135": "LT" },
sku2_map = { "3111": "LC", "3110": "LCA" };
// put rest of skus here
var el_ids = [];
for (var key in el_id_map) {
if (el_id_map.hasOwnProperty(key)) {
el_ids.push(el_id_map[key]);
}
}
function change_handler() {
$(sku_id).val([
sku1_map[$(el_id_map["sku1"]).val()],
sku2_map[$(el_id_map["sku2"]).val()],
$(el_id_map["length"]).val()].join(""));
}
function hijack_changes(change_handler) {
$(el_ids).each(function(i, el) {
el = $(el);
el.data('onchange', el.attr('onchange')); // save inline event
el.attr("onchange", null); // remove inline event
el.change(function() {
change_handler.apply(this, arguments);
var target=$(this);
if (target.data("onchange")) {
var handler = new Function(target.data("onchange"));
handler.apply(this, arguments);
}
});
});
}
function hijack_ajax() {
var old_fn_post_process_form_files = window.fn_post_process_form_files;
window.fn_post_process_form_files = function() {
hijack_changes(change_handler);
old_fn_post_process_form_files.apply(this, arguments);
}
}
hijack_ajax();
hijack_changes(change_handler);
})();