eventos de copia de un elemento a otro usando jQuery

Question

tengo DOM es así:

<a href='javascript:void(0)' id='link1'>Element with events bound initially</a> 
<a href='javascript:void(0)' id='link2'>Element to which events are bound in future</a> 

Y esto javascript:

$(function(){ 
    $('#link1').bind('click',function(){alert('do something to make me happy');}) 
}); 

Ahora algún tiempo en el futuro quiero copiar todos los eventos de la envolvente en el link1 a link2. Lo estoy haciendo como se describe a continuación, por favor sugiera una forma mejor si es posible o disponible.

var _elmEvents = $(#link1).data('events'); 

if (_elmEvents) { 
    $.each(_elmEvents, function (event, handlers) { 
     $.each(handlers, function (j, handler) { 
      $('#link2').bind(event, handler); 
     }); 
    }); 
} 

Answer 1

Si desea copiar todos los eventos de un objeto a otro sin clonar, puede hacerlo accediendo directamente a los datos de los eventos.

Por ejemplo, si se hizo:

$("#the_link").click(function(e){ 
    // do some stuff 
    return false; 
}.mouseover(function(e){ 
    // do some other stuff 
}); 

Se puede acceder a los asociados de eventos en los datos del elemento de los 'eventos'

var events = $("#the_link").data('events'); 

Será un objeto cuyas teclas representan el evento tipo, cada uno contiene una matriz de asociaciones de eventos. De todos modos, aquí hay un ejemplo simple, sin tener en cuenta los espacios de nombres.

var events = $("#the_link").data('events'); 
var $other_link = $("#other_link"); 
if (events) { 
    for (var eventType in events) { 
     for (var idx in events[eventType]) { 
      // this will essentially do $other_link.click(fn) for each bound event 
      $other_link[ eventType ](events[eventType][idx].handler); 
     } 
    } 
} 

Answer 2

Echa un vistazo this resource.

Answer 3

Puede clone un elemento y manipular el nuevo elemento como desee, sin embargo, jQuery no proporciona una manera fácil de copiar manejadores de eventos de un elemento a otro. Sin embargo, el código que haría sería:

var events = jQuery.data(originalElement, "events"); 

for (var type in events) { 
    for (var handler in events[ type ]) { 
     jQuery.event.add(targetElement, type, events[ type ][ handler ], events[ type ][ handler ].data); 
    } 
} 

Pero ya que se basa tanto en la parte interna de jQuery, me gustaría tratar de hacer una solución usando clon.

Answer 4

respuesta aceptada no funcionó para mí, como yo uso espacios de nombres y otros eventos (como "pasta") que no son un método en jQuery.

Esto funcionó para mí:

function copyEvents(source, destination) { 
    // Get source events 
    var events = source.data('events'); 

    // Iterate through all event types 
    $.each(events, function(eventType, eventArray) { 
     // Iterate through every bound handler 
     $.each(eventArray, function(index, event) { 
      // Take event namespaces into account 
      var eventToBind = event.namespace.length > 0 
       ? (event.type + '.' + event.namespace) 
       : (event.type); 

      // Bind event 
      destination.bind(eventToBind, event.data, event.handler); 
     }); 
    }); 
} 

Answer 5

Esto se basa en Brandons trabajo, pero actualizado para trabajar con todas las versiones de jQuery-. Probado en 1.6.4 hasta 2.0.x.

/** 
* Logic for copying events from one jQuery object to another. 
* 
* @private 
* @name jQuery.event.copy 
* @param jQuery|String|DOM Element jQuery object to copy events from. Only uses the first matched element. 
* @param jQuery|String|DOM Element jQuery object to copy events to. Copies to all matched elements. 
* @type undefined 
* @cat Plugins/copyEvents 
* @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) 
* @author Yannick Albert (mail@yckart.com || http://yckart.com) 
*/ 
jQuery.event.copy = function (from, to) { 
    from = from.jquery ? from : jQuery(from); 
    to = to.jquery ? to : jQuery(to); 

    var events = from[0].events || jQuery.data(from[0], "events") || jQuery._data(from[0], "events"); 
    if (!from.length || !to.length || !events) return; 

    return to.each(function() { 
     for (var type in events) 
     for (var handler in events[type]) 
     jQuery.event.add(this, type, events[type][handler], events[type][handler].data); 
    }); 
}; 

Answer 6

Este funcionó muy bien en mi script.

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

lo encontré aquí (fuente): http://snipplr.com/view/64750/