jQuery not working .bind, .on, .click possible conflict? -
i have jsfiddle of working piece of jquery here. basically, i'm using jquery hide or show drop down based in radio button selected.
everything works in jsfiddle when integrate site doesn't. if there click function assigned via plugin, what's best way prevent conflicts?
i have tried, .on ('click', .bind( , .click( , nothing works.
the html:
<div class="foxyshop_variations"> <label class="variation-8-wide" for="403_1">8' wide</label> <select class="variation-8-wide" id="403_1" name="8'_wide"> <option value="select 8' wide kit||c9a7aebec7e7384386231888176bd47864d248a88c2922aed00fba45d8a714ad">select 8' wide kit</option> <option pricechange="+0" value="8x8{p+0.00lw-75lc+rs88g}||b7b2c2d752e830d8ca803aa2a0f25dba6081baf2ff4a75e4c8a5dbb382549f51">8x8 (+$0.00)</option> <option pricechange="+7000" value="8x10{p+70.00|w-85lc+rs810g}||593e367aab31f5540b068bd1f3404762394538807a137624419389f0d9302fcf">8x10 (+$70.00)</option> <option pricechange="+13500" value="8x12{p+135.00|w-95lc+rs812g}||ed2f781d9f9fd7738157ea31c0f552f912f929c960bb73e36ca1d24bba62ffcf">8x12 (+$135.00)</option> <option pricechange="+20500" value="8x14{p+205.00|w-105lc+rs814g}||0f528bdd6d6987630a7023b79fd9cf4ac35856199ae824ed1101d8226f6e7fb5">8x14 (+$205.00)</option> <option pricechange="+23500" value="8x16{p+235.00|w-115lc+rs816g}||49595b16c4e506f0b936521d82c283cd2dcc15bd85b6a5d3d8e45cc81f3da427">8x16 (+$235.00)</option> <option pricechange="+23500" value="8x18{p+235.00|w-125lc+rs818g}||c2a0d4ffa51343cae6a4eba706b448baf1922dcd6827f13a6523fe8bb71d5062">8x18 (+$235.00)</option> <option pricechange="+23500" value="8x20{p+235.00|w-135lc+rs820g}||820a5ab4534c2039c25091b0d9ad8c869fa81c28a98a96ccfe344ea009010658">8x20 (+$235.00)</option> </select> <div class="clr"></div> <label class="variation-10-wide" for="403_2">10' wide</label> <select class="variation-10-wide" id="403_2" name="10'_wide"> <option value="select 10' wide kit||998d37aa429bbe3570d8e2b58962acd56fff7982a018f34e3ca0c9c88fc5ab47">select 10' wide kit</option> <option pricechange="+0" value="10x8{p+0.00|w-110lc+rs108g}||94c9190a6fd9036a48734d8bfa2610702f122f999ee0381419efb7ba6663c411">10x8 (+$0.00)</option> <option pricechange="+7000" value="10x10{p+70.00|w-125lc+rs1010g}||9767c842283d2323b09ef69e293659429b041a6fd8695a569d0a4fb25f05179a">10x10 (+$70.00)</option> <option pricechange="+13500" value="10x12{p+135.00|w-140lc+rs1012g}||cc1b9825f63e04382881bbf6fd278ab51bd53d052a312c7958cb21d7706cc8f8">10x12 (+$135.00)</option> <option pricechange="+20500" value="10x14{p+205.00|w-75.5lc+rs1014g}||6992dcd2f27f9d61d04ba330250966baa245124dbf851f72169064dea6bda315">10x14 (+$205.00)</option> <option pricechange="+23500" value="10x16{p+235.00|w-85lc+rs1016g}||62e66d53bd8412bea5ca6c6e149e8ab8c52fcd72275f852cc106320e5d2cf227">10x16 (+$235.00)</option> <option pricechange="+23500" value="10x18{p+235.00|w-92.5lc+rs1018g}||4ac77aff339ecda405853c7ced04ebcd330d3a7efeab53428651578a054117c3">10x18 (+$235.00)</option> <option pricechange="+23500" value="10x20{p+235.00|w-100lc+rs1020g}||43aade4c64edd6855fddbd8c9234df0de876c62e3430c20e1af5e744588fad12">10x20 (+$235.00)</option> </select> <div class="clr"></div> <div class="foxyshop_radio_wrapper"> <div class="foxyshop_radio_title">check one</div> <div class="foxyshop_short_element_holder"> <input type="radio" checked="checked" class="variation-check-one" id="403_3_0" value="8' wide||250cb4d758d5c0f482b9d48009b03653b8e8d41e6fee682f5578a9b5e4d32abf" name="check_one"> </div> <label class="variation-check-one foxyshop_no_width" for="403_3_0">8' wide</label> <div class="clr"></div> <div class="foxyshop_short_element_holder"> <input type="radio" class="variation-check-one" id="403_3_1" value="10' wide||e502477417a1f9d94aa0bd90e4116c485911296d434602822663a3e13df476c0" name="check_one"> </div> <label class="variation-check-one foxyshop_no_width" for="403_3_1">10' wide</label> <div class="clr"></div> </div> <div class="clr"></div> <label for="quantity_403" class="foxyshop_quantity">quantity</label> <input type="text" class="foxyshop_quantity" value="1" id="quantity_403" name="quantity||203d4bc6421ae54a22598d6ac0e45e8a3d7434c2395a4a4bf2eeeca368532660||open"> <div class="clr"></div>
the jquery:
$("#403_3_0").click(function () { $("#403_2, .variation-10-wide").hide("fast"); $("#403_1, label.variation-8-wide").show("fast"); }); $("#403_3_1").click(function () { $("#403_1, label.variation-8-wide").hide("fast"); $("#403_2, .variation-10-wide").show("fast"); });
it's not conflict problem.
you're not targeting right elements. on websites, element ids
#403_1_0
, #403_1_1
Comments
Post a Comment