Что лучше в ajax on или oncliсk?

Question

[Алексей Лебедев]

var tmp='<div id="but" onclick="Action();"></div>';
$("#content").html(tmp);

var tmp='<div id="but"></div>';
$("#content").html(tmp);
$("#but").on("click", function(event){
    Action();
});

Все говорят, что 2-й вариант лучше.
Он длиннее, а плюсов я не вижу. Кроме отделение обработчиков от кода. Так чем он лучше?
Или есть 3-й вариант -- самый лучший.

Еще такой вопрос:
Во втором случае создается новый обработчик при каждом $("#but").on. Т.е. создав и убрав кнопку 100 раз мы получаем 100 обработчиков, которые висят в памяти?

Еще был замечательный live, которого больше нету.

Comments

[Сергей Семенко]

А при чём здесь ajax?

Answer 1

[Константин Китманов]

Еще был замечательный live, которого больше нету.

Вообще .on все умеет:
$('#content').on('click', '.button', onClick)

Answer 2

[Даниил Колесниченко]

Второй вариант лучше, потому что пихать код в строку -- совсем не хорошо и лучше этого избегать
Только ни один из примеров к AJAX не имеет никакого отношения

UPD:
В Вашем примере можно сделать так:

var tmp='<div id="but"></div>';
$("#content").html(tmp);
$("#but").on("click", Action);

UPD2:
Имхо, более расово верный способ создать div#but:

$("<div/>", {id: "but"})    // вместо $("<div id=\"but\"></div>")

Comments

[Алексей Лебедев]

Что насчет несколько тысяч вызовов $("#but").on("click", Action);?
Обработчики сохраняются?

[Даниил Колесниченко]

Алексей Лебедев: да, сохраняются. Но если Вы удалите элемент (как Вы написали в вопросе), то обработчики удалятся вместе с ним

Answer 3

[Роман]

Вы сами ответили себе

Кроме отделение обработчиков от кода.

Необходимо разделять структуру и остальные плюшки

Comments

[Алексей Лебедев]

А если с точки зрения производительности, то 1-й вариант быстрее.

Меня больше скорость волнует на старых мобилках, чем красота кода.

[Роман]

Алексей Лебедев: не увидел вот-этого "Т.е. создав и убрав кнопку 100 раз мы получаем 100 обработчиков, которые висят в памяти?". Вот если так как вы во втором способе будете навешывать обработчик, то да, он будет висеть в памяти и это будет негативно сказываться на производительности. Ниже вам указали как лучше.

Но вот касательно сравнения скорости с вашим первым вариантом - не знаю, будет ли отличие.

[teotlu]

Алексей Лебедев: дело не в красоте кода, а в расширяемости и поддерживаемости. Поскольку в обоих вариантах вы используете глобальную функцию, особой разницы между ними я не вижу (ну, разве что, в случае с on вы сможете обработчик убить, если понадобится).

[Arris]

Алексей Лебедев: может быть не стоит создавать 100 обработчиков? На странице 100 кнопок? Окей, у каждой прописываем нужный date-foobar=".." и class="action-something", а потом вешаемся как-то так:

$('body').on('click', '.action-something', function(){
var button_data = $(this).data('foobar');
...
}

Answer 4

[Владимир]

Я тут немного погуглил за вас. Надеюсь вы не против?

jQuery Events изнутри

on — главный метод, позволяет как привязать обработчик непосредственно к элементу, так и делегировать обработку событий; для делегирования необходимо передать необязательный параметр selector;

Пишем качественный код на jQuery

Используйте ‘On’

Последние версии библиотеки jQuery привнесли изменения в функции типа click() — теперь это сокращение от on('click'). В более ранних версиях click() являлся сокращением от bind(). Начиная с версии jQuery 1.7 предпочтительный метод для привязки обработчиков событий — on(). Для единообразия гораздо проще использовать on() везде в подобных случаях.

// плохо
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})

// лучше
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})

$first.on('hover',function(){
    $first.css('border','1px solid red');
})

Answer 5

[Developer Yii]

По идее jQuery - надстройка над js. Я бы сравнил это с ситуацией "нужен ли вам молоток или обычный камень тоже подойдет?" К чему я это? Если надо сделать простой функционал то нативный js вполне себе подходит и незачем грузить целую библиотеку. Главное чтобы работало!!! ну и чтобы удобно было. Мне кажется, минималисты (индивидуальные разрабы) буду за 1-й вариант, командные - за второй. С точки зрения кол-ва обработчиков: мне кажется там в любом случае каждой отдельной кнопке будет выделено по обработчику поскольку это разные события (не уверен).

Comments

[Евгений Петров]

Надстройка?) Вы и тут пургу гоните?)
Как связаны термин AJAX и какие-то библиотеки? Как связана регистрация слушателя и какие-то библиотеки?
Погуглите XMLHttpRequest и addEventListener перед тем, как писать чушь про нативный JS и библиотеки.

[Developer Yii]

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

[Евгений Петров]

Developer Yii: Я хочу предостеречь людей от серьёзного восприятия той глупости, что вы пишете.
У вас — каша в голове, 10 раз уже упомянули пост, к вам не имеющий никакого отношения.

[Developer Yii]

Как я уже упарился, ну когда же ты отстанешь от меня ;)))))))))))))))))))))) ну не будет у нас с тобой 3 раза, а точнее 2. ну я ошибся, извини, я полный отстой, ты крут!