मैं jQuery के साथ एक प्रतिनिधि कार्यक्रम मैन्युअल रूप से कैसे ट्रिगर करूं?

Question

क्या jQuery के साथ एक प्रतिनिधि ईवेंट हैंडलर मैन्युअल रूप से ट्रिगर करने का कोई तरीका है?

लें निम्न उदाहरण कोड:

<div class="container"> 
    <input type="button" value="Hello"> 
    <span class="output"></span> 
</div> 
​ 
<script> 
    $('.container') 
    .on('click', '[type=button]', function(e) { 
     $(e.delegateTarget).find('.output').text($(this).val()); 
    }) 
    .find('[type=button]').triggerHandler('click');​ 
</script> 

(ऑनलाइन: http://jsfiddle.net/TcHBE/)

मैं, उम्मीद कर रहा था कि इस काम करेगा, और पाठ "हैलो" वास्तव में बटन पर क्लिक बिना सी अवधि में प्रकट होता है, लेकिन यह नहीं करता है

मैं हैंडलर के अंदर e.delegateTarget का उपयोग कर रहा हूं, क्योंकि .ouput तत्व .container के अंदर किसी स्थान के अलावा बटन के ज्ञात संबंध में नहीं होगा। यही कारण है कि मैं पहले स्थान पर एक प्रतिनिधि कार्यक्रम हैंडलर का उपयोग कर रहा हूं।

अद्यतन:

इसके अलावा, मैं, triggerHandler उपयोग कर रहा हूँ क्योंकि घटना वास्तविक कोड मैं को गति प्रदान नहीं करना चाहते में एक डिफ़ॉल्ट व्यवहार है। (वास्तविक कोड में यह घटना की कस्टम घटना hide है, लेकिन पेज लोड पर ईवेंट हैंडलर ट्रिगर करते समय मैं वास्तव में मोडल को छिपाना नहीं चाहता)।

मैं हैंडलर को नामित फ़ंक्शन में निकाल सकता हूं और इसे सीधे कॉल कर सकता हूं, लेकिन e.delegateTarget के उपयोग के कारण, इससे यह और अधिक जटिल हो जाएगा।

Answer 1

आप इवेंट ऑब्जेक्ट मैन्युअल रूप से बना सकते हैं और target संपत्ति को अनुसार बिकले हुए ईवेंट को सोचने के लिए jQuery की चाल के अनुसार सेट कर सकते हैं। .on() विधि में

var c = $('#container'); 

c.on('click', '[type=button]', function(e) { 
    $(e.delegateTarget).find('span').text($(this).val()); 
}); 

var event = jQuery.Event('click'); 
event.target = c.find('[type=button]')[0]; 

c.trigger(event); 

http://jsfiddle.net/PCLFx/

Answer 2

चयनकर्ता वैकल्पिक हैं।
जब आप लिखें:

$('.container') 
    .on('click', '[type=button]', function(e) { 
     $(e.delegateTarget).find('.output').text($(this).val()); 
    }) 
    .find('[type=button]').triggerHandler('click');​ 

आप केवल कंटेनर के अंदर बटन पर क्लिक करने के लिए सुनने के लिए ईवेंट हैंडलर कह रहे हैं।
$(e.delegateTarget) बाहरी कंटेनर का संदर्भ है।

मैंने your fiddle to echo this अपडेट किया है।

यह एक उद्धरण from the API:

जब एक चयनकर्ता प्रदान की जाती है, ईवेंट हैंडलर के रूप में सौंप जाना जाता है। जब ईवेंट सीधे पर बाध्य तत्व पर होता है तो हैंडलर को नहीं कहा जाता है, लेकिन केवल वंशजों (आंतरिक तत्व) के लिए जो चयनकर्ता से मेल खाते हैं। jQuery घटना को ईवेंट से को उस तत्व पर लक्षित करता है जहां हैंडलर संलग्न है (यानी, बाहरीतम तत्व के लिए सबसे ऊपर) और चयनकर्ता से मेल खाने वाले पथ के साथ किसी भी तत्व के लिए हैंडलर चलाता है।