HTML: OnLoad для элементов без тела

Мой нормальный способ выполнения JavaScript трансформирует на множество элементов с помощью JQuery:HTML: OnLoad для элементов без тела

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

Однако эта операция является хрупким и ломким: она работает на предположении, что страница загружается только один раз. Как только вы начнете попадать в Ajax и частичную перезагрузку, этот вид глобального преобразования полностью разрушается. Он также не работает, если сервер хочет сделать другое преобразование для каждого элемента на основе некоторых данных на сервере.

Я знаю фактическое событие onload для не-body элементов не работает. Одним из решений является дать все идентификаторы элементов/классы и ссылки на них сразу же с помощью JQuery:

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

Однако, это действительно грязно; Мне это совсем не нравится, отчасти потому, что каждый элемент, который я даю ID, загрязняет глобальное пространство имен. В настоящее время я даю элементу эффективный неконтактный ID

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

на основе случайных чисел base64. Тем не менее, все это похоже на гигантский взлом: я могу дать элементы onclick s и onmousedown s и так просто использовать их соответствующие атрибуты, которые затем вызывают функцию для преобразования данного this.

Теперь, я знаю onload не работает. Однако есть ли способ имитировать его функциональность? В частности, я хочу иметь возможность запускать код javascript, ссылающийся на конкретный тег, используя this без необходимости присваивать им тег ID.

EDIT: По сути, я хочу что-то вроде

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

но для OnCreate; мой текущий случай использования для заполнения input или textarea с текстом, и я сейчас делаю:

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

где ... различна для каждого поля ввода, и, таким образом, не может быть легко сделать с помощью «глобального» JQuery преобразования , С другой стороны, я не могу просто установить value или атрибут input, когда я его создам, так как это может быть textarea, и я не знаю. Я хочу сделать что-то вроде:

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

Что не работает, но я бы хотел. Опять же, ... задается сервером и различается для каждого тега input на странице.

EDIT2:

Я хорошо известно час JQuery, как правило, используется, чтобы сделать весь-документ переходит на множество элементов таким же образом. Дело в том, что в этом случае каждый элемент преобразуется способом, определенным для этого элемента, который продиктован сервером. В конкретном случае использования каждое поле имеет свое содержимое, предварительно заполненное $().val(), и, естественно, каждое поле будет заполнено различным содержимым. Предоставление каждому элементу уникального Идентификатор и использование JQuery для глобального поиска, чтобы найти этот элемент снова, кажется невероятным окольным способом делать что-то и, конечно же, ломается, когда вы запускаете части Ajaxing своей страницы.

EDIT3:

Короче говоря, я хочу, чтобы иметь возможность написать

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

и javascriptFunction() запускаться при включении <div> создается (будь то на начальной странице или вставляться через AJAX) и передается <div> в качестве параметра. Точно так же, как onclick будет запускать javascriptFunction() с <div> в качестве параметра при нажатии на div, я хочу, чтобы то же самое произошло, но когда <div> был создан/вставлен в DOM.

Я хочу принять любое количество установочных сценариев в <head>, чтобы это произошло. По причинам, указанным выше, я не хочу добавлять теги <script> после <div> или добавить class или id в <div>. Учитывая эти ограничения, что лучше всего сделать для имитации атрибута onload для элементов без тела?

источник

2012-04-10 Li Haoyi

Не задайте вопрос .. –

Как именно вы намерены идентифицировать тег, который вы пытаетесь решить? Существует несколько способов перевести свои критерии в код, но чтобы помочь вам разобраться в коде, нам нужно сначала знать ваши критерии. – dragon

Этот материал http://docs.jquery.com/Plugins/livequery утверждает, что делает то, что вы хотите: «Live Query также имеет возможность запускать функцию (обратный вызов), когда она соответствует новому элементу и другой функции (обратный вызов) для когда элемент больше не сопоставляется ». Я не тестировал его сам. –

Там нет такого onload события в DOM спецификации, однако DOM Level 2 спецификация обеспечивает Mutation event types, чтобы уведомление о любых изменениях в структуру документ, в том числе изменения attr и текста, в настоящее время только современные браузеры поддерживают такие события, и в Internet Explorer 9 он глючит!

Однако вы можете использовать DOMNodeInserted event контролировать документ для любого изменения:

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

Вы должны быть осторожны при использовании событий мутации, по крайней мере, попытаться обновить! Согласно W3C:

типы Мутации события до сих пор не была полностью и с сохранением интероперабельности реализованных через агент пользователей, новая спецификация находится в стадии разработки с целью устранения случаев использования, что мутационные события решают, но в более производительном способе ,

Я думаю, если вы Google этот вопрос, вы можете найти перекрестную плагин браузера/JQuery для этого, только в случае, если эти ссылки migh помочь:

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

источник

2012-05-04 11:50:06

Предоставление элементов идентификатор не «загрязняет глобальное пространство имен», это всего лишь механизм для ссылок на элементы. Вам нужен только идентификатор для элемента, который вы намереваетесь ссылаться по идентификатору. Предоставление идентификаторов другим элементам не является вредным, просто ненужным.

Вы можете ссылаться на элементы по ряду критериев, включая класс и их позицию в DOM (любой метод в пуле селекторов CSS, а также отношения DOM - родительский, дочерний, родственный и т. Д.). Метод, который вы выбрали, может иметь преимущества и недостатки в зависимости от того, как вы его используете, нет никакого «хорошего» или «наилучшего» способа сделать это, просто некоторые методы лучше подходят для некоторых случаев.

Если вы хотите заменить, скажем, прослушиватели после замены элементов в DOM, то для замены элементов необходимо учитывать это. Делегирование событий - одна из стратегий, есть и другие.

источник

2012-04-10 01:06:14 RobG

Да, я знаю, что есть компромиссы; Я думал о них достаточно подробно =). Преобразование всех my-элементов-id-и-later-do-'$ (" # id "). Click (...)', чтобы просто использовать атрибуты 'onclick' элементов, сохранил мне несколько десятков строк кода на протяжении всего и сделало его более ясным, что происходит. Я хотел бы сделать что-то подобное для всех преобразований jquery, которые предназначены для запуска при создании элемента. Другими словами, я не хочу, чтобы мой код для замены элементов заменял всех слушателей, если он не может быть выполнен автоматически, потому что я собираюсь заменить тонны кода. –

Если вы добавите слушателей в разметку, тогда клонирование элемента сохранит слушателя. Если вы динамически добавляете слушателей, нет опции, кроме как добавлять их снова, когда вы заменяете элемент или используете делегирование родительскому объекту, который не заменен. – RobG

Вот почему я спрашиваю, есть ли способ добавить слушателя 'onLoad' в разметку! Или добиться того же самого, используя какую-то одноразовую гимнастику JQuery. Проблема с добавлением их снова заключается в том, что у меня много вещей, связанных с Ajaxed, и вероятность ошибки очень высока. Теперь это определенно будет работать в краткосрочной перспективе, но в конечном итоге это добавит общую спагестерность базы кода. –

Все зависит от того, с какими тегами вы хотите работать.

Одна вещь, чтобы знать, что Jquery позволяет выбрать много вещей сразу, поэтому, когда вы делаете что-то вроде $('p'), что объект относится к все в p узлов.

Выполнение примерно $('p').hide() скрывает все узлы p.

Селекторы jQuery являются (по крайней мере) такими же мощными, как и селектор CSS, поэтому вы можете сделать некоторые симпатичные семантические вещи в одной строке.

Представьте себе, если у вас что-то вроде списка ответных ящиков для секции комментариев или что-то:

----------------------------------------- 
    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)

Так ваш макет DOM может выглядеть

<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>

так что если вы хотите обновить все ваши поля ввода, чтобы поместить текст по умолчанию, вам просто нужно увидеть, что селектор CSS для ваших полей - .comment > input.

После этого JS появляется сам по себе

$(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

источник

2012-04-10 02:30:40 rtpg

-1

Что относительно window.onload()?

источник

2012-05-07 22:42:59

HTML: OnLoad для элементов без тела

ответ

Смежные вопросы