swanrnd
@swanrnd
Издатель HTML5 игр

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

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, которого больше нету.
  • Вопрос задан
  • 1071 просмотр
Пригласить эксперта
Ответы на вопрос 5
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Еще был замечательный live, которого больше нету.

Вообще .on все умеет:
$('#content').on('click', '.button', onClick)
Ответ написан
Комментировать
Второй вариант лучше, потому что пихать код в строку -- совсем не хорошо и лучше этого избегать
Только ни один из примеров к 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>")
Ответ написан
paradokso
@paradokso
Начинающий фронт-эндер
Вы сами ответили себе
Кроме отделение обработчиков от кода.

Необходимо разделять структуру и остальные плюшки
Ответ написан
@Realmixer
Full stack Python (Django) web-developer
Я тут немного погуглил за вас. Надеюсь вы не против?

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');
})
Ответ написан
Комментировать
developerYii
@developerYii
bash/php/python/ruby/js/css/yaml+++
По идее jQuery - надстройка над js. Я бы сравнил это с ситуацией "нужен ли вам молоток или обычный камень тоже подойдет?" К чему я это? Если надо сделать простой функционал то нативный js вполне себе подходит и незачем грузить целую библиотеку. Главное чтобы работало!!! ну и чтобы удобно было. Мне кажется, минималисты (индивидуальные разрабы) буду за 1-й вариант, командные - за второй. С точки зрения кол-ва обработчиков: мне кажется там в любом случае каждой отдельной кнопке будет выделено по обработчику поскольку это разные события (не уверен).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы