Jquery .change() फ़ंक्शन गतिशील रूप से आबादी वाले SELECT सूची के साथ काम नहीं कर रहा है

Question

मेरे पास एक चुनिंदा फ़ील्ड है जो गतिशील रूप से अजाक्स कॉल के साथ आबादी वाला है जो सभी HTML चयन विकल्पों को वापस देता है। यहां PHP का हिस्सा है जो सिर्फ चयन टैग गूंजता है और प्रत्येक विकल्प/मान को गतिशील रूप से भरता है।

echo "<select name='player1' class='affector'>"; 
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>"; 

foreach ($start as $value) { 
    echo "<option value='".$value."'>".$value."</option>"; 
} 
    echo "</select>"; 
} 

के बाद इस सूची से भर जाता है, मैं एक परिवर्तन घटना कॉल करने के लिए कोशिश कर रहा हूँ ताकि जब भी डिफ़ॉल्ट विकल्प का चयन सूची में या एक ही कक्षा के साथ एक पाठ क्षेत्र में बदल दिया गया है, यह एक रेडियो बटन को निष्क्रिय फॉर्म के दूसरे हिस्से में सेट करें।

$('.affector').change(function(){ 
     $(this).parents('tr').find('input:radio').attr('disabled', false); 
}); 

किसी कारण से (आप प्रारंभिक सवाल मैं काम कर रहा here कार्यक्षमता के इस भाग प्राप्त करने के लिए कहा देख सकते हैं), भले ही मैं चुनिंदा क्षेत्र उचित वर्ग के नाम (affector) देते हैं, जब मैं विभिन्न विकल्पों का चयन करें क्षेत्र में, फॉर्म के अन्य भाग अक्षम नहीं होते हैं। एक ही कक्षा के साथ स्थिर पाठ क्षेत्र ठीक काम करता है। मैं उलझन में हूं।

कोई विचार?

Answer 1

बस अपने आखिरी सवाल पर टिप्पणी की है ... यहाँ मैं क्या कहा है:

उपयोग jQuery अपने ajax सफलता समारोह में

function addSelectChange() { 
    $('select').bind('change', function() { 
     // yada yada 
    }); 
} 

कॉल addSelectChange बाँध। यह चाल करना चाहिए। JQuery लाइव इवेंट पर भी एक नज़र डालें (जब आप बाद के प्रोजेक्ट या कुछ में सभी मौजूदा और भविष्य के डीओएम तत्वों के लिए ईवेंट सेट करना चाहते हैं)। दुर्भाग्य से परिवर्तन घटना और कुछ अन्य अभी तक लाइव के साथ समर्थित नहीं हैं। बाध्य दूसरी सबसे बड़ी चीज

Answer 2

आइटम जो गतिशील डोम में डाला जाता है के लिए, उनके घटनाओं

$('.selector').bind('change',function() { doWork() }); 

साथ बाध्य किया जाना चाहिए इसका कारण यह है कि जब आप $(function(){}); चलाने के लिए और $.click या $.change, आदि का उपयोग कर की घटनाओं के लिए बाध्य है, तो आप करने के लिए घटनाओं के लिए बाध्यकारी हैं तत्व पहले से ही डोम में मौजूद है। इसके बाद आप जो भी मैनिप्ल्यूशन करते हैं वह $(function(){}); कॉल में जो कुछ भी होता है उससे प्रभावित नहीं होता है। $.bind आपके पृष्ठ को आपके चयनकर्ता के साथ-साथ वर्तमान में भविष्य के तत्वों को देखने के लिए कहता है।

Answer 3

.live कोशिश: http://docs.jquery.com/Events/live

डॉक्स से: सभी मौजूदा के लिए एक घटना (क्लिक) की तरह करने के लिए कोई हैंडलर बांधता - और भविष्य - मिलान किया तत्व। कस्टम घटनाओं को भी बांध सकते हैं।

Answer 4

एक उदाहरण .live का उपयोग कर()

$('#my_form_id select[name^="my_select_name"]').live('change', (function() { 
    console.log($("option:selected", this).val()); 
    }) 
); 

Answer 5

मैं समाधान के रूप में पाया केवल

<select id="myselect"></select> 

php/html फ़ाइल में

बनाने के लिए और फिर से इसके लिए विकल्पों उत्पन्न है ajax:

$.post("options_generator.php", function (data) { $("#myselect").append(data); }); 

केवल options_generator.php गूंज विकल्पों में:

echo "<option value='1'>1</option>"; 
echo "<option value='2'>2</option>"; 

Answer 6

इसके बजाए प्रतिनिधि() फ़ंक्शन का उपयोग करें।कि यहाँ http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Answer 7

तारीख जवाब देने के लिए ऊपर एक और अधिक _{बारे में ..}

के बाद से तत्वों द्वारा डायनामिक रूप से कर रहे हैं, तो आप event delegation के लिए देख रहे हैं।

.live()/.bind()/.delegate() का उपयोग न करें। आपको .on() का उपयोग करना चाहिए।

jQuery API docs के अनुसार:

jQuery 1.7 के रूप में, .on() विधि एक दस्तावेज़ में ईवेंट हैंडलर्स संलग्न के लिए पसंदीदा तरीका है। पिछले संस्करणों के लिए, .bind() विधि का उपयोग इवेंट हैंडलर को सीधे तत्वों को जोड़ने के लिए किया जाता है। हैंडलर jQuery ऑब्जेक्ट में वर्तमान में चयनित तत्वों से जुड़े हुए हैं, इसलिए उन तत्वों को .bind() पर कॉल करने के बिंदु पर मौजूद होना चाहिए। अधिक लचीली घटना बाध्यकारी के लिए, .on() में ईवेंट प्रतिनिधिमंडल की चर्चा देखें।

इसलिए आप कुछ इस तरह का प्रयोग करेंगे: "< '।। $ मूल्य विकल्प मान =" "'>"

$(document).on('change', 'select', function (e) { 
    /* ... */ 
});