एक तत्व के ईवेंट हैंडलर को दूसरे पर डुप्लिकेट करें?

Question

आप एक ईवेंट हैंडलर को एक तत्व से दूसरे तत्व में कैसे कॉपी करते हैं? उदाहरण के लिए:

$('#firstEl') 
    .click(function() { 
     alert("Handled!"); 
    }) 
; 

// here's where the magic happens 
$('#secondEl').click = $('#firstEl').click; // ???? 

ध्यान दें कि दूसरा तत्व जब पहला तत्व अपने हैंडलर हो रही है के लिए एक अलग समय में कार्रवाई की जा रही है, जिसका अर्थ है कि यह:

$('#firstEl, #secondEl').click(function() { ... }); 

... नहीं होगा काम।

Answer 1

आप आसानी से (और संभवतः नहीं) घटना को "कॉपी" नहीं कर सकते हैं।

var clickHandler = function() { alert('click'); }; 
// or just function clickHandler() { alert('click'); }; 

$('#firstEl').click(clickHandler); 

// and later 
$('#secondEl').click(clickHandler); 

वैकल्पिक रूप से आप वास्तव में दूसरे हैंडलर में पहले तत्व के लिए ईवेंट को सक्रिय कर सकता है:

$('#firstEl').click(function() { 
    alert('click'); 
}); 

$('secondEl').click(function() { 
    $('#firstEl').click(); 
}); 

संपादित करें: @nickf बारे में चिंतित है आप क्या कर सकते को संभालने के लिए एक ही समारोह का उपयोग प्रत्येक है ग्लोबल नेमस्पेस को दूषित है, लेकिन इस लगभग हमेशा एक वस्तु में कोड लपेटकर से बचा जा सकता:

function SomeObject() { 
    this.clickHandler = function() { alert('click'); }; 
} 
SomeObject.prototype.initFirstEvent = function() { 
    $('#firstEl').click(this.clickHandler); 
}; 
SomeObject.prototype.initSecondEvent = function() { 
    $('#secondEl').click(this.clickHandler); 
}; 

या एक गुमनाम समारोह में अपने कोड लपेटकर और इसे तुरंत बुला:

(function() { 
    var clickHandler = function() { alert('click'); }; 
    $('#firstEl').click(clickHandler); 
    $('#secondEl').click(clickHandler); 
})(); 

Answer 2

क्या आप यह देख रहे हैं? ।।

var clickHandler = function() { alert("Handled!"); } 
$('#firstEl').click(clickHandler); 
$('#secondEl').click(clickHandler); 

Answer 3

$ ('# secondEl') पर क्लिक करें = $ ('# firstEl') click.bind ($ ('# secondEl'));

आप यह मानते हुए प्रोटोटाइप जे एस (http://www.prototypejs.org/api/function/bind)

उपयोग कर रहे हैं

Answer 4

आप triggerHandler method

// here's where the magic happens 
//$('#secondEl').click = $('#firstEl').click; // ???? 
$('#secondEl').click(function() { 
    $('#firstEl').triggerHandler('click'); 
}); 

Answer 5

http://www.learningjquery.com/2007/01/copy-events-from-one-element-to-another

Answer 6

यह सवाल पहले से ही उत्तर दिया गया था में रुचि हो सकती है, लेकिन भविष्य में संदर्भ के लिए: आप उन्हें नकल कर सकता है मूल तत्व की घटनाओं को पुन: स्थापित करके और अपने हैंडलरों को लक्ष्य में बाध्यकारी बनाकर।

> नीचे संपादित देखें देखें!

// iterate event types of original 
$.each($('#original').data('events'), function() { 
    // iterate registered handler of original 
    $.each(this, function() { 
    $('#target').bind(this.type, this.handler); 
    }); 
}); 

आप मूल तत्व का कोई नियंत्रण नहीं है जब यह आसान है (उदाहरण के लिए जब एक प्लगइन का उपयोग) और सिर्फ एक निश्चित तत्व के व्यवहार क्लोन करने के लिए चाहते हैं।

संपादित करें: तत्वों तक पहुंच ईवेंट हैंडलर बाद के jQuery संस्करणों में बदल दिया गया है। इस नए संस्करण के लिए काम करना चाहिए:

$.each($._data($('#original').get(0), 'events'), function() { 
    // iterate registered handler of original 
    $.each(this, function() { 
    $('#target').bind(this.type, this.handler); 
    }); 
}); 

चीयर्स