Jump to content
  • 0

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


cyklop77
 Share

Question

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

 

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

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

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

 

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

 

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
$('.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 by cyklop77
  • Like 1
Link to comment
Share on other sites

  • 0

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

 

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

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

 

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

 

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

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

 

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

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

Link to comment
Share on other sites

  • 0

 

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

http://devday.ru/report/152 

 

там 404

 

 

 

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

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

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

 

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

 

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

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

 

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

 

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

Link to comment
Share on other sites

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

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

 

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

более чем

 

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

 

там 404

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

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

  • Like 1
Link to comment
Share on other sites

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

 

 

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

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

 

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

Link to comment
Share on other sites

  • 0
это понятно. но дело в том, что вместо этого 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);
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By РоманФ
      Возникли сложности с созданием нестандартной формы в конструкторе сайтов, может кто-то сталкивался с такими проблемами?
      Как решать такие проблемы в конструкторах по типу Lp Motor и Tilda(есть блок html есть куда вставить css, ну и соответственно есть возможность вставлять скрипты js), что использовать и как отправлять формы на почту в такой ситуации?
       
    • By toplife
      Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.
       
      Что мы ожидаем от кандидата:
      Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.  
      Задачи, которые вам предстоит решать:
      Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress);  
      Условия:
      Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб;  График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
      Антон
      тел: 8(981)897-42-46
      mail: a.majstrenko@top-life.su
      hh: https://spb.hh.ru/vacancy/30397980
    • By Olesiy
      Здравствуйте дорогие форумчане! Сделала всплывающую форму обратной связи на своем сайте, все работает,нормально, вот только после отправки письма форма не закрывается, нужно нажимать на крестик для закрытия. Как сделать так , что бы после успешной отправки форма сама закрывалась.Если кому не трудно подскажите ПОЖАЛУЙСТА. P.S в js не буб бум.
      Вот форма:
      <div class="popup"> <div class="popup-dialog">  <div class="popup-content">  <button class="popup-close"> &times;</button> <form  class="top" action="smart.php" method="POST"> <h4>Submit your application</h4> <label for="name"> Your  name<input type="text" name="name" value="" placeholder="name"></label> <label for="emeil"> Your e-meil<input type="text" name="e-meil" value="" placeholder="emeil" required></label> <label for="phone">Your Phone<input type="text" name="phone"  id="phone" value="" placeholder="phone"></label> <textarea name="comment" id="comment-field"  rows="4">comment</textarea> <button class="button-block button-btn" type="submit">  to order</button> </form> </div> </div> </div>  
      Вот скрипт отправки:
      $('form').submit(function(event) { event.preventDefault(); var th = $(this); $.ajax({ type: "POST", url: "smart.php", data:$(this).serialize() }).done(function() { $(this).find("input").val(""); alert("Спасибо за заявку!"); $("form").trigger("reset"); }); return false; }); И на всякий случай скрипт всплытия окна
      $(document).ready(function() { $('.popup-btn').on('click', function (event) { $('.popup').fadeIn();// к тому что нужно показать, fadeIn с анимацией }); $('.popup-close').on('click', function (event) { event.preventDefault(); $('.popup').fadeOut(); }); })  
    • By Лелик
      Очень нужен фильтр товаров на ajax без БД. В интернете нашла подходящий пример. Могу провести всю рутинную работу (коей очень много) по наполнению фильтра. Есть проблемы:
      1. не знаю, как проверить его на ошибки, и
      2. не знаю, как встроить в сайт
      Прошу провести эти две работы. Для заинтересованного программиста пришлю более подробное описание ТЗ
    • By cyklop77
      подскажите пожалуйста, что нужно сделать чтобы получить возможность использовать базу городов от КЛАДР? она выложена в общий доступ, но обратиться через ajax к ней невозможно потому что браузеры не разрешают кроссдоменные запросы
      когда бэкенд пишешь сам, то сам же и настраиваешь отдающий сервер в соответствии с CORS, но здесь не тот случай. однако, думаю, большинство разработчиков тянут данные из КЛАДР при помощи ajax. и.... я тоже хочу
      пока только придумал установить в хром расширение. но это временная мера - только для этапа разработки.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy