jQuery无法在实时环境中工作

时间：2012-03-26 08:18:02

标签： jquery smarty cs-cart

我有以下代码在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>

更新

经过进一步调查并与各种人交谈后，问题似乎是由于内置的​​onchange事件导致CS Cart与我编写的jQuery发生冲突。

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

4 个答案:

答案 0 :(得分：4)

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

 $("#opt_29821_745").on('change', function() {
 ....

答案 1 :(得分：1)

尝试在javascript代码之前添加此内容。

jQuery.noConflict();

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

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

或用$

替换所有jQuery

答案 2 :(得分：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

答案 3 :(得分：0)

我认为这是因为您要在<div/>而不是<select/>上设置事件。 

$("#opt_29821_746").live('change', function(){

应该是

$("#option_29821_746").live('change', function(){

此外，您遇到的问题是您的AJAX回调会重置所有字段，因为它只是在填写字段时设置返回的HTML，因此即使代码有效，也会每次都重置它。考虑返回一个简单的列表（JSON将是我的选择）并在客户端设置选项而不是在服务器端进行渲染。 或者，如果您坚持使用AJAX，请考虑推迟AJAX请求，直到您填写该字段（首先填写字段，然后填写AJAX请求）。我假设这是进行AJAX调用的内联onclick。由于这很丑陋，我不会害怕让它变得更丑 - 你可以将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);

})();
相关问题
最新问题