2012-04-10 5 views
6

mi forma normal de realizar Javascript transforma en una gran cantidad de elementos en medio de jQuery:HTML: proceso de carga de elementos no corporales

<div class="cow"></div> 
<script> $(".cow").doStuff() </script> 

Sin embargo, esta operación es frágil y quebradizo: funciona en el supuesto de que la página está todo cargado solo una vez Una vez que comienzas a entrar en Ajax y recargas parciales, este tipo de transformación global se rompe por completo. Tampoco funciona si el servidor desea hacer una transformación diferente para cada elemento en función de algunos datos del lado del servidor.

Sé que el evento real onload para elementos que no son body no funciona. Una solución es dar a todos los identificadores de elementos/clases y hacer referencia a ellos a usar inmediatamente JQuery:

<div id="cow"></div> 
<script> $("#cow").doStuff() </script> 

Sin embargo, es muy sucia; No me gusta nada, en parte porque cada elemento que doy una ID contamina el espacio de nombres global I. Actualmente estoy dando al elemento una identificación efectivamente no colonable.

<div id="id877gN0icYtxi"></div> 
<script> $("#id877gN0icYtxi").doStuff() </script> 

según los números aleatorios de base64. Sin embargo, todo esto parece un truco gigante: puedo dar los elementos onclick sy onmousedown sy muy simplemente usando sus respectivos atributos, que luego llaman a una función para transformar el this dado.

Ahora, sé que onload no funciona. Sin embargo, ¿hay alguna forma de simular su funcionalidad? Específicamente, deseo poder ejecutar el código de JavaScript haciendo referencia a una etiqueta en particular usando this sin tener que asignarles una identificación.

EDIT: Básicamente quiero algo así como

<input onclick="alert('moo')"/> 

pero para alcrear; mi caso uso actual es para llenar un input o textarea con el texto, y actualmente estoy haciendo:

<input id="id877gN0icYtxi"/> 
<script>$("#id877gN0icYtxi").val(...)</script> 

donde el ... es diferente para cada cuadro de entrada, y por lo tanto no se puede hacer fácilmente con un "global" jQuery transformar . Por otro lado, no puedo simplemente configurar el value o el atributo input cuando lo creo, ya que puede ser un textarea, y no lo sé. Quiero hacer algo como:

<input onload="$(this).val(...)"/> 

Lo que no funciona, pero ojalá lo hiciera. De nuevo, el ... es establecido por el servidor y diferente para cada etiqueta input en la página.

Edit2:

yo soy muy consciente de hora jQuery se suele utilizar para hacer todo el documento se transforma en una gran cantidad de elementos de la misma manera. El problema es que en este caso, cada elemento se está transformando de una manera específica para ese elemento, dictado por el servidor. El caso de uso específico es que cada campo tiene sus contenidos precompletados por $().val(), y naturalmente cada campo se rellenará con diferentes contenidos. Darle a cada elemento un ID único y usar JQuery para hacer una búsqueda global para encontrar ese elemento de nuevo parece una manera increíblemente indirecta de hacer las cosas, y por supuesto se rompe cuando comienzas a Ajaxing partes de tu página dentro y fuera.

Edit3:

En resumen, quiero ser capaz de escribir

<div onload="javascriptFunction(this)"/> 

y han javascriptFunction() ejecutar en cuando se crea el <div> (ya sea en la página inicial o inserta a través de AJAX) y pasar el <div> como parámetro. Al igual que onclick se ejecutaría javascriptFunction() con <div> como parámetro cuando se hace clic en el div, quiero que ocurra lo mismo, pero cuando se crea/inserta el <div> en el DOM.

Estoy dispuesto a aceptar cualquier cantidad de scripts de configuración en el <head> para que esto suceda. Por las razones mencionadas anteriormente, no estoy dispuesto a agregar ninguna etiqueta <script> después del <div>, o para agregar un class o id al <div>. Dadas estas limitaciones, ¿qué es lo mejor que se puede hacer para simular un atributo onload para elementos que no son del cuerpo?

+1

No recibas tu pregunta .. –

+2

¿Cómo exactamente quieres identificar la etiqueta que intentas abordar? Hay varias maneras de traducir sus criterios en código, pero para ayudarlo a descubrir el código, primero debemos conocer su criterio. – dragon

+0

Esto http://docs.jquery.com/Plugins/livequery dice hacer lo que quieras: "Live Query también tiene la capacidad de activar una función (devolución de llamada) cuando coincide con un elemento nuevo y otra función (devolución de llamada) para cuando un elemento ya no se corresponde ". No lo he probado yo mismo. –

Respuesta

10

No hay tal onload evento en especificación DOM, sin embargo especificación DOM Nivel 2 proporciona Mutation event types, para permitir la notificación de cualquier cambio en la estructura de un documento, que incluye modificaciones de texto y de texto, actualmente solo los navegadores modernos admiten estos eventos y tiene errores en Internet Explorer 9.

Sin embargo, usted podría utilizar DOMNodeInserted event para monitorear el documento para cualquier cambio:

$(document).live("DOMNodeInserted", function(e){ 
    $(e.target).val(...); 
}); 

Usted debe tener cuidado usando eventos de mutación, por lo menos tratar de ser actualizado! De acuerdo con W3C:

tipos de eventos de mutación aún no ha sido completa y con interoperabilidad implementado a través de los agentes de usuario, una nueva especificación está en desarrollo con el objetivo de hacer frente a los casos de uso que los eventos de mutación resuelve, pero en forma más performante .

supongo que si buscas en Google la materia, es posible encontrar algún plugin para el navegador/jQuery cruz para esto, por si acaso, estos enlaces Migh ayudan:

https://developer.mozilla.org/en/DOM/Mutation_events

http://help.dottoro.com/ljfvvdnm.php#additionalEvents

http://help.dottoro.com/ljmcxjla.php

http://help.dottoro.com/ljimhdto.php

http://www.bennadel.com/blog/1623-Ask-Ben-Detecting-When-DOM-Elements-Have-Been-Removed-With-jQuery.htm

0

Dar elementos una ID no "contamina el espacio de nombre global", es solo un mecanismo para hacer referencia a los elementos. Solo necesita una ID para un elemento que desea referenciar por ID. Dar identificaciones a otros elementos no es dañino, solo innecesario.

Puede hacer referencia a elementos por una serie de criterios, incluida la clase y su posición en DOM (cualquier método en el grupo de selectores CSS y también relaciones DOM-parent, child, sibling, etc.). El método que elija puede tener ventajas y desventajas dependiendo de cómo lo esté usando, no existe una forma intrínsecamente "buena" o "mejor" de hacerlo, solo que algunos métodos se adaptarán mejor que otros a algunos casos.

Si desea reemplazar, por ejemplo, oyentes después de reemplazar elementos en el DOM, entonces su para reemplazar los elementos necesita dar cuenta de eso. La delegación de eventos es una estrategia, hay otros.

+0

Sí, sé que hay compensaciones; He pensado en ellos completamente =). Convirtiendo todo mi give-element-id-and-later-do-'$ (" # id "), haga clic en (...)' para simplemente usar los elementos 'onclick' el atributo me guardó unas pocas docenas de líneas de código en todo el programa y lo hizo toneladas más claro de lo que estaba pasando. Me gustaría hacer algo similar para todas las transformaciones de jquery que deben ejecutarse cuando se crea el elemento. Para decirlo de otra manera, no quiero que mi código para reemplazar elementos reemplace a todos los oyentes si no se puede hacer automáticamente, porque voy a reemplazar toneladas de código. –

+0

Si agrega sus oyentes en el marcado, la clonación del elemento retendrá al oyente. Si agrega oyentes dinámicamente, no hay más opción que agregarlos nuevamente cuando reemplaza el elemento o usa la delegación en un elemento primario que no se reemplaza. – RobG

+0

¡Por eso estoy preguntando si hay alguna manera de agregar un oyente 'onLoad' en el marcado! O para lograr lo mismo con una gimnasia JQuery única. El problema con volver a agregarlos es que tengo muchas cosas que están siendo Ajaxed dentro y fuera, y la posibilidad de error es muy alta. Ahora, definitivamente funcionará en el corto plazo, pero a la larga se agregará a la espaguetis general de la base de códigos. –

1

Todo esto depende del tipo de etiquetas con las que desea trabajar.

Una cosa a saber es que jQuery le permite seleccionar una gran cantidad de elementos a la vez, así que cuando haces algo como $('p'), ese objeto se refiere a todos los los nodos p.

Haciendo algo así como $('p').hide(), oculta todos los nodos p.

jQuery selectores son (al menos) tan potentes como selectores de CSS, por lo que puede hacer algunas cosas semánticas bonitas en líneas individuales.

Imagínese si usted tenía algo así como una lista de casillas de respuesta para una sección de comentarios o algo:

----------------------------------------- 
    Comment #1 
    blah blah blah blah blah 
    [ Text field ] (Reply) 
----------------------------------------- 
    Comment #2 
    nyark nyark nyark nyark 
    [ Text field ] (Reply) 
----------------------------------------- 
    Comment #3 
    ubadabuba 
    [ Text field ] (Reply) 
----------------------------------------- 
    Comment #4 
    eeeeeeeeeeeeeeeeeeeeeeeeee? 
    [ Text field ] (Reply) 

Por lo que su diseño DOM podría ser algo como

<div class="comment" > 
    <h1> Comment #1 </h1> 
    <p> blah blah blah blah blah </p> 
    <input /> <button >Reply </button> 
</div> 
<div class="comment" > 
    <h1> Comment #2 </h1> 
    <p> nyark nyark nyark nyark </p> 
    <input /> <button >Reply </button> 
</div> 

por lo que si desea actualizar todos sus campos de entrada, para poner un texto predeterminado, solo necesita ver que el selector de CSS para sus campos es .comment > input.

Después de que la JS aparece por sí mismo

$(document).ready(function(){ 
    var inputs=$('.comment > input ');//references all the input fields defined by this selector 
    inputs.attr('value','default text');//set the value of the text in the input 
})​ 

Example shown here

-1

¿Qué hay de window.onload()?

Cuestiones relacionadas