связать обработчик в элементами без обновления страницы

[cyklop77]

помогите пожалуйста советом

 

на страничке есть список из 10 элементов. на каждый элемент повешен обработчик:

$('#el').on('click', function(e){   bla}

обаботчик вешает некоторый цикл, который отрабатывает по событию document.ready

 

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

 

подскажите пожалуйста как мне повесить обработчик на вновьдобавленные элементы, не обновляя страничку

[antonKar]

$('.exist_parent_on_generation_DOM').on('click', '.el', function(e){

//bla

}

Edited July 28, 2015 by antonKar

[cyklop77]

$('.exist_parent_on_generation_DOM').on('click', '.el', function(e){   //bla}

это понятно. но дело в том, что вместо этого bla у меня довольно много кода. и при таком подходе мне придётся этот код дублировать. вот моя функция полностью:

    // create album ajax    $('#new_album').on('submit', function(e){      e.preventDefault();      var currentUserId = $(this).attr('data-current-user'),          albumTitle = $('input#album_title').val();      $.ajax({        url: '/users/' + currentUserId + '/albums',        type: 'POST',        dataType: "JSON",         data: $('#new_album').serialize(),        success: function(result){          console.log(result);          handleModal('album create', 'is successfull', '00ff2a', 2000);          $('input#album_title').val('');          $('#albumsList tbody').append('<tr> \            <td>' + albumTitle + '</td> \            <td></td> \            <td></td> \            <td><span class="destroy_album" data-album-id="' + result.id + '">destroy</span></td> \          </tr>');        },        error: function(xhr, ajaxOptions, thrownError){          handleModal('album create', 'is failed. ' + xhr.status + ' error.', 'f00', 2000);        }              })    });      // handle modal window    function handleModal(title, body, colorHex, timeout){      $('#titleModalInfo').html(title).css({'color': '#' + colorHex});      $('#bodyModalInfo').html(body);      $('#modalInfo').modal();      setTimeout(deinitializationModalInfo, timeout)      function deinitializationModalInfo(){        $('#modalInfo').modal('hide');        $('#titleModalInfo').empty();        $('#bodyModalInfo').empty();      };    }

в общем, проблема наверное в том как код раскидать, а не обработчик повесть. поторопился я тему создавать

Edited July 28, 2015 by cyklop77

[Galaxy]

если элементы будут динамически созданы, то будет нужно делегирование.

[nerv]

@cyklop77, используй http://vuejs.org/и будет тебе счастье 

[lexxcode]

обаботчик вешает некоторый цикл, который отрабатывает по событию document.ready

 

Нужно просто читать документацию. Это же элементарная задача. Для таких целей нужно использовать всплытие. В твоем случае получится примерно вот так:

/* Вешаем событие на document */$(document).on({    click : function() {        //bla    }}, '.js-click'); // ожидаем всплывшее событие от селектора .js-click

используй http://vuejs.org/ и будет тебе счастье

Ухты, что это за микро Angular.js?

[antonKar]

Ухты, что это за микро Angular.js?

Выступление про vue.js

Edited July 28, 2015 by antonKar

[nerv]

Ухты, что это за микро Angular.js?

мое скудное описание

официальное описание

 

Как по мне лишен недостатков angular, Ractive.js & Rivets.js. Т.е. у разработчика Vue.js вроде как получилось взять все самое лучшее от этих фреймворков/библиотек.

 

Я на скорую руку поднимал пару демок на Vue.js, одна из них Решение пятнашек.

Для быстрого старта с Vue.js достаточно посмотреть песочницу* 

 

*тому, кто писал на ангуляре

upd: я краем глаза смотрел исходники (вроде чистые), немного пулл-реквестил

[li4e]

Я относительно недавно стал постоянно использовать angular и пока еще не понимаю его недостатков. Можете просветить пожалуйста.

[lexxcode]

 

Ухты, что это за микро Angular.js?

http://devday.ru/report/152 

 

там 404

 

 

 

Ухты, что это за микро Angular.js?

мое скудное описание

официальное описание

 

Как по мне лишен недостатков angular, Ractive.js & Rivets.js. Т.е. у разработчика Vue.js вроде как получилось взять все самое лучшее от этих фреймворков/библиотек.

 

Я на скорую руку поднимал пару демок на Vue.js, одна из них Решение пятнашек.

Для быстрого старта с Vue.js достаточно посмотреть песочницу* 

 

*тому, кто писал на ангуляре

 

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

[antonKar]

там 404

Поправил. Если просто ссылку оставить, то у неё в конце всегда пробел добавляется почему-то

Edited July 28, 2015 by antonKar

[nerv]

Я относительно недавно стал постоянно использовать angular и пока еще не понимаю его недостатков. Можете просветить пожалуйста.

их много. Один из них https://github.com/angular/angular.js/issues/11454

 

По крайней мере на первый взгляд выглядит очень вкусно

более чем

 

немного обновил этот коммент

 

там 404

я с главной перешел http://devday.ru/report/152

быстро глянул слайды, похоже на адекватную презентацию)

[lexxcode]

Выступление про vue.js

 

 

я с главной перешел http://devday.ru/report/152быстро глянул слайды, похоже на адекватную презентацию)

Спасибо, посмотрю 

 

upd: Интересный доклад. Посмотрел.

[wwt]

это понятно. но дело в том, что вместо этого bla у меня довольно много кода. и при таком подходе мне придётся этот код дублировать. вот моя функция полностью:

 

заместо анонимной функции можно передавать имя обработчика

function handler () {}$('.exist_parent_on_generation_DOM').on('click', '.el', handler);

Кроме этого можно еще и параметры передавать в обработчик

function handler (e) {    alert(e.data);}var data = 123;$('.exist_parent_on_generation_DOM').on('click', '.el', data,  handler);