jQueryのは、私がjsfiddleで正常に動作している次のコードをしている

Question

ライブ環境で動作しません機能は、これはそれが動作する必要があるページです。

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

部品番号ボックスには、これがライブバージョンで起こっていない、ユーザーは選択肢間の選択を行うように記入されているべきです私はエラーメッセージを受け取っていないようです。私はエロメッセージを受け取っていないので、どこから問題が発生しているのかを調べ始めるべきかどうかはわかりません。

私の元のメッセージに加えて、CSカートは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> 

---

UPDATE

問題があることインラインonchangeイベントに起因すると思われる、さらなる調査の後、様々な人と話して私が書いたjQueryとCS Cartが衝突するように組み込まれています。

インラインコーディングで発生している関数と一緒にコードを処理するのは可能でしょうか？

Answer 1

.change()イベントは、静的コンテンツに対してのみ発生します。あなたのケースでは、あなたは次のようにjQueryの.on()イベントを使用する必要があります。

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

Answer 2

あなたのjavascriptのコードの前にこれを追加してみます。これで

jQuery.noConflict(); 

またはあなたのjqueryのコードをラップ： - JavaScriptの日付ピッカーに接続されたテキストボックス

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

または交換すべて$

Answer 3

jQueryとは、私は同様の問題がありました。私はonchangeイベントを使用して、別のフィールドの日付と比較しました（開始日/終了日の種類のものでした。開始日が終了日前であることを確認したいと思います）。

オンチェンジのみが起動しません。解決方法は、onchangeとonpropertyの両方の変更イベントを使用することです。私が持っているコントロール上

：私のisDoSomethingがどのように見える

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

：

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も設定します

Answer 4

<select/>ではなく、<div/>にイベントを設定しています。それは単にHTMLコードをフィールドが埋められた一回戻った、そうしても設定されますので、

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

はまた、あなたは、あなたのAJAXコールバックは、すべてのフィールドをリセットし、問題を

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

を持っているべきですそれは毎回リセットされます。シンプルなリスト（JSONは私の選択）を返すことを考慮し、サーバー側でレンダリングするのではなく、クライアント側でオプションを設定してください。 また、AJAXをそのまま使用すると主張する場合は、フィールドに記入するまでAJAX要求を延期することを検討してください（まずフィールドに記入し、次にAJAX要求）。私はそれがAJAX呼び出しを行うインラインonclickだと仮定します。

$('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); } 
    }); 
}); 

しかし、あなたがする必要があります：あなたはjQueryのデータとして脇onclickを保存し、ラインで次のことを置くことができる - これはそのまま醜いですので、私はそれが醜い作ることを恐れてはいけません。これはあなたの要素としての各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("")); 
    }); 

})() 

あなたは、私がコメントadd more code hereなどを配置した場所私が作った最初のコードでは、ここでlive()ハンドラ内のコードを配置します。しかし、あなたが確認する必要があります覚えています各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); 

})();