4

我有以下代码在 jsfiddle 中运行良好 - http://jsfiddle.net/darkajax/FHZBy/

我已将代码转移到我需要使用代码的页面，并为函数分配了正确的 ID 号，这是它应该工作的页面：

http://mtpassemblies.com/cs-cart/index.php?dispatch=products.view&product_id=29821

当用户在选项中进行选择时，应该填写部件号框，这在实时版本上没有发生，而且我似乎没有收到任何错误消息。由于我没有收到任何错误消息，因此我不确定应该从哪里开始查看问题出在哪里。

根据我的原始消息，CS Cart 似乎是基于 Smarty 框架构建的，我不确定这是否与问题有关？

这是来自该网站的 jQuery：

<script type="text/javascript">// <![CDATA[
$(function() {
var sku1 = sku2 = sku3 = sku4 = sku5 = sku6 = length = '';
$("#opt_29821_746").change(function(){

    switch($(this).val()){
        case "3134":
             sku1 = 'TB';
        break;
        case "3135":
             sku1 = 'LT';
        break;
        case "3154":
            sku1 = 'LTR';
        break;
        case "3136":
             sku1 = 'BO';
        break;
        case "3138":
             sku1 = 'MC';
        break;
        case "3139":
             sku1 = 'NC';
        break;
        case "3183":
              sku1 = 'STA';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
$("#opt_29821_742").change(function(){
    switch($(this).val()){
        case "3111":
              sku2 = 'LC';
        break;
        case "3110":
             sku2 ='LCA';
        break;
        case "3112":
             sku2 ='E2000';
        break;
        case "3113":
             sku2 ='E2A';
        break;
        case "3114":
             sku2 ='FC';
        break;
        case "3115":
             sku2 ='FCA';
        break;
        case "3116":
             sku2 ='ST';
        break;
        case "3117":
             sku2 ='SC';
        break;
        case "3118":
             sku2 ='SCA';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
$("#opt_29821_744").change(function(){
    switch($(this).val()){
        case "3175":
              sku3 = '2';
        break;
        case "3121":
             sku3 ='4';
        break;
        case "3122":
             sku3 ='6';
        break;
        case "3123":
             sku3 ='8';
        break;
        case "3124":
             sku3 ='12';
        break;
        case "3125":
             sku3 ='16';
        break;
        case "3126":
             sku3 ='24';
        break;
        case "3176":
             sku3 ='48';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$("#opt_29821_745").change(function(){
    switch($(this).val()){
        case "3127":
              sku4 = 'OS12';
        break;
        case "3182":
             sku4 ='G657A1';
        break;
        case "3128":
             sku4 ='OM1';
        break;
        case "3129":
             sku4 ='OM2';
        break;
        case "3130":
             sku4 ='OM3';
        break;
        case "3131":
             sku4 ='OM4';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$("#opt_29821_748").change(function(){
    switch($(this).val()){
        case "3142":
              sku5 = 'LC';
        break;
        case "3143":
             sku5 ='LCA';
        break;
        case "3144":
             sku5 ='E2000';
        break;
        case "3145":
             sku5 ='E2A';
        break;
        case "3146":
             sku5 ='FC';
        break;
        case "3147":
             sku5 ='FCA';
        break;
        case "3148":
             sku5 ='ST';
        break;
        case "3149":
             sku5 ='SC';
        break;
        case "3150":
             sku5 ='SCA';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$("#opt_29821_749").change(function(){
    switch($(this).val()){
        case "3151":
              sku5 = 'LZSH';
        break;
        case "3177":
             sku5 ='PE';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$('#opt_29821_753').change(function(){
    length = $(this).val();
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
});
// ]]></script>

更新

经过进一步调查并与各种人交谈后，问题似乎是由onchangeCS Cart 内置的内联事件与我编写的 jQuery 冲突引起的。

所以问题似乎更多是有可能让代码与内联编码触发的函数一起工作吗？

4

4 回答 4

4

该.change()事件只会针对静态内容触发。在您的情况下，您应该使用 jQuery 的.on()事件，例如：

 $("#opt_29821_745").on('change', function() {
 ....
于 2012-03-26T08:27:54.297 回答
1

尝试在您的 javascript 代码之前添加它。

jQuery.noConflict();

或者用这个包装你的jQuery代码：

jQuery(document).ready(function($){
   // your code here
});

或全部替换$为jQuery

于 2012-03-26T09:34:43.480 回答
0

我有一个类似的问题 - 一个连接到 javascript 日期选择器的文本框。我想使用 onchange 事件将选择的日期与另一个字段上的日期进行比较（这是一个开始日期/结束日期之类的事情，我想确保开始日期在结束日期之前 - 如果不是，请切换它们）

只有 onchange 不会触发。解决方案是同时使用 onchange 和 onproperty 更改事件。

在控制上我有：

<input id='mytext' name='mytext' type='text' onchange='doSomething();' onpropertychange='isDoSomething(event);' />

我的 isDoSomething 看起来像：

function isDoSomething(eventobj) {
if ("propertyName" in eventobj) { // Older browsers might not have this property
    if (eventobj.propertyName == 'value') // Check if the property that was changed was the value
        dosSomething();
}
else // on older browsers can't  check what property was changed so just do your thing
    doSomething();
}

这就是最终为我工作的东西-希望它有所帮助

使用您的示例：不仅设置 .change 功能，还设置 .propertychange

于 2012-04-04T09:02:06.680 回答
0

我认为这是因为您将事件设置在<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 调用后执行此操作，因为您的元素正在被替换。您可能也可以live()在这里使用 jQuery，但这对于我来说太难写了。

至于第一点，我认为使用命名变量会为您省去麻烦。为简洁起见，我建议您这样做：

(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);

})();
于 2012-04-04T11:19:53.433 回答