Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Одинаковые элементы и одинаковые события / 23 сообщений из 23, страница 1 из 1
13.08.2016, 00:48
    #39291370
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Здорова товарищи....

Проблема в следующем....

Одним словом у меня есть <input id="search-filed"> этиъ инпутов несколько ...
Новый инпуты добавляются по нажатию кнопки

НА каждый из них я вещаю обработчик события таким образом....
Код: javascript
1.
2.
3.
      $('.admin-center').on('keyup', '.section-slider-action #search-field', function (event) {
        admin.searchProduct($(this).val(), '.section-slider-action .resultmaterial');                
      });



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

Не пойму как сделать... Спасибо
...
Рейтинг: 0 / 0
13.08.2016, 08:21
    #39291389
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlack,
id - это уникальное значение
...
Рейтинг: 0 / 0
13.08.2016, 10:46
    #39291409
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Id - у меня же есть на input , с именем search-field.
Мне нужно чтоб они одинаково назывались, на них всех повешен одинаковый обработчик, просто нужно чтоб обработчик относился к конкретному инпуту
...
Рейтинг: 0 / 0
13.08.2016, 11:18
    #39291413
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlack, в каком хоть браузере?

В Хроме ни фига не воспроизводится:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <div class="admin-center">
    <div class="section-slider-action">
      <input id="search-filed" value="a" />
      <input id="search-filed" value="b" />
      <input id="search-filed" value="c" />
    </div>  
  </div>
  <script>
    $('.admin-center').on('keyup', '.section-slider-action #search-filed', function() { alert($(this).val()); });
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
13.08.2016, 11:19
    #39291414
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
И вместо id конечно же нужно использовать class:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <div class="admin-center">
    <div class="section-slider-action">
      <input class="search-filed" value="a" />
      <input class="search-filed" value="b" />
      <input class="search-filed" value="c" />
    </div>  
  </div>
  <script>
    $('.admin-center').on('keyup', '.section-slider-action .search-filed', function() { alert($(this).val()); });
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
13.08.2016, 11:31
    #39291416
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
У меня следующая ситуация, когда я ввожу данные в инпут какой то, у меня происходит поиск данных, и выпадает список с найденными записями, но когда я выпадает список то он одновременно выпадает род всеми инпутами, а мне нужно чтоб он выпадал род тем инпутом, где я ввожу строку.
...
Рейтинг: 0 / 0
13.08.2016, 11:38
    #39291419
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlackУ меня следующая ситуация, когда я ввожу данные в инпут какой то, у меня происходит поиск данных, и выпадает список с найденными записями, но когда я выпадает список то он одновременно выпадает род всеми инпутами, а мне нужно чтоб он выпадал род тем инпутом, где я ввожу строку.
чукча писатель?
...
Рейтинг: 0 / 0
13.08.2016, 12:46
    #39291439
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Товарищи как мне сделать, то что я указал?
...
Рейтинг: 0 / 0
13.08.2016, 13:10
    #39291445
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlackУ меня следующая ситуация, когда я ввожу данные в инпут какой то, у меня происходит поиск данных, и выпадает список с найденными записями, но когда я выпадает список то он одновременно выпадает род всеми инпутами, а мне нужно чтоб он выпадал род тем инпутом, где я ввожу строку.
Покажите код, что список рисует, а не тот, что keyup обрабатывает.
...
Рейтинг: 0 / 0
13.08.2016, 13:16
    #39291447
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Вот этот код, динамически добавдяет новый инпут и еще кое какие элементы

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
      drawControlImage: function(url, main, filename, title, alt) {
           var mainclass = "main-img-prod";
           if (main == true) {
               mainclass = "small-img";
           }
           
           return '\
                    <div class="product-upload-img '+mainclass+'" data-filename="'+filename+'" style="margin-bottom: 20px;">\
                        <div class="product-img-prev" style="width: 820px">\
                            <div style="float:left;">\
                                <!-- <a href="javascript:void(0);" class="main-image tool-tip-bottom" title="По умолчанию"><span></span></a>-->\
                                <div class="img-loader" style="display:none"></div>\
                                <div class="prev-img"><img src="'+url+'" alt="'+filename+'" /></div>\
                                <form class="imageform" method="post" noengine="true" enctype="multipart/form-data">\
                                    <a href="javascript:void(0);" class="add-img-wrapper">\
                                       <span>Загрузить</span>\
                                       <input type="file" name="photoimg" class="add-img tool-tip-top" title="Загрузить изображение">\
                                    </a>\
                                </form>\
                                <a href="javascript:void(0);" class="cancel-img-upload tool-tip-top" title="Удалить изображение слайда"><span>Удалить</span></a>\
                                <div class="clear"></div>\
                             </div>\
                             <div style="float: left; margin-left: 15px">\
                                <ul class="custom-form-wrapper type-img-desc">\
                                    <li>\
                                      <span class="custom-text" style="min-width: 80px">Ссылка:</span><input type="text" class="search-field" placeholder="Заголовок материала, на который будет ссылка" name="title_href" style="width: 400px; background: #fff url('+mgBaseDir+'/mg-admin/design/images/icons/search-icon.png) 99% 4px no-repeat;"/>\
                                      <div id="resultmaterial" class="resultmaterial"></div>\
                                      <input type="hidden" name="href" />\
                                    </li>\
                                </ul>\
                                <ul class="custom-form-wrapper action-list" style="padding: 4px 6px 0px 10px;margin-top: 0px;float:right">\
                                   <li class="delete-order" id="">\
                                      <a href="javascript:void(0);" title=""></a>\
                                   </li>\
                                </ul>\
                             </div>\
                        </div>\
                    </div>';           
      }




Этот код показывает выпадающий список, после вводак значения в инпут

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
    searchProduct: function (text, fastResult) {
      if (text.length >= 2) {
        admin.ajaxRequest({
          mguniqueurl: "action/getSearchData",
          search: text
        },
        function (response) {
          admin.searcharray = [];
          var html = '<ul class="fast-result-list">';
          var currency = response.currency;
          var mgBaseDir = $('#thisHostName').text();

          function buildElements(element, index, array) {
            admin.searcharray.push(element);
            html +=
              '<li><a href="javascript:void(0)" data-element-index="' +
              index + '" data-id="' + element.id + '" data-url="'+element.category_url+element.product_url+'" > \n\
                <div class="fast-result-img">' +
              '<img src="' + element.image_url
              + '" ' + 'alt="' + element.title + '"/>' +
              '</div><div class="fast-result-info"><div class="search-prod-name">'
              + element.title +
              '</div></div></a></li>';
          }

          if ('success' == response.status && response.item.items.catalogItems.length > 0) {
            response.item.items.catalogItems.forEach(buildElements);
            html += '</ul>';
            $(fastResult).html(html);
            $(fastResult).show();
          } else {
            $(fastResult).hide();
          }
        },
          false,
          "json",
          true
          );
      } else {
        $('.fastResult').hide();
      }
    }



Этот код который позволяет обрабатывать ввод в инпуте

Код: javascript
1.
2.
3.
$('.admin-center').on('keyup', '.section-slider-action .search-field', function (event) {
        admin.searchProduct($(this).val(), '.section-slider-action .resultmaterial');                
      });



Допустим я добавил два инпута, и сопутствующие элементы, при этом происходит правильный список, но выпадает список сразу в обеих инпутах или во всех которые я добавил туда...
...
Рейтинг: 0 / 0
13.08.2016, 14:27
    #39291458
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Что не так сделано?
...
Рейтинг: 0 / 0
13.08.2016, 15:50
    #39291467
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlackЧто не так сделано?
добавил инпут — присвой ему уникальный id, и сним работай
...
Рейтинг: 0 / 0
13.08.2016, 16:31
    #39291473
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Получается, различные id у всех инпутов, а как тогда привязать одно событие к ним всем...
...
Рейтинг: 0 / 0
13.08.2016, 17:56
    #39291486
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlack,
по классу
...
Рейтинг: 0 / 0
13.08.2016, 22:31
    #39291521
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
Можно пример написать..., если не трудно
...
Рейтинг: 0 / 0
14.08.2016, 10:26
    #39291550
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlackМожно пример написать..., если не трудно
трудно разбираться в неоптиманом коде.
решается просто , если передавать на сервер id инпута, и обратно его возвращать, и по этому id направлять ответ от сервера нужному
...
Рейтинг: 0 / 0
14.08.2016, 11:01
    #39291552
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
В чем заключается неоптимальность кода?
...
Рейтинг: 0 / 0
14.08.2016, 11:47
    #39291556
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlack,

А Вы точно сформулировали проблему?

"все сразу инпуты начинают срабатывать" - что это означает конкретно?

Возможно, Вы имеете в виду изменения в объектах класса '.resultmaterial' ?

Ниже корректный код skyANA, но немного расширенный для иллюстрации возможной проблемы.

Этот код показывает Вашу проблему?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <div class="admin-center">
    <div class="section-slider-action">
      <input class="search-filed" value="a" />
      <div class="resultmaterial">-</div>
    </div>  
    <div class="section-slider-action">
      <input class="search-filed" value="b" />
      <div class="resultmaterial">-</div>
    </div>  
    <div class="section-slider-action">
      <input class="search-filed" value="c" />
      <div class="resultmaterial">-</div>
    </div>  
  </div>
  <script>
    $('.admin-center').on('keyup', '.section-slider-action .search-filed', function() {
        $('.section-slider-action .resultmaterial').html($(this).val());
    });
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
14.08.2016, 13:25
    #39291576
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
бухалтер фантоцциMBlack,

А Вы точно сформулировали проблему?

"все сразу инпуты начинают срабатывать" - что это означает конкретно?

Возможно, Вы имеете в виду изменения в объектах класса '.resultmaterial' ?

Ниже корректный код skyANA, но немного расширенный для иллюстрации возможной проблемы.

Этот код показывает Вашу проблему?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <div class="admin-center">
    <div class="section-slider-action">
      <input class="search-filed" value="a" />
      <div class="resultmaterial">-</div>
    </div>  
    <div class="section-slider-action">
      <input class="search-filed" value="b" />
      <div class="resultmaterial">-</div>
    </div>  
    <div class="section-slider-action">
      <input class="search-filed" value="c" />
      <div class="resultmaterial">-</div>
    </div>  
  </div>
  <script>
    $('.admin-center').on('keyup', '.section-slider-action .search-filed', function() {
        $('.section-slider-action .resultmaterial').html($(this).val());
    });
  </script>
</body>
</html>



Наверное меня опять не поняли...
]"все сразу инпуты начинают срабатывать" - это означает что у меня под инпуоами появляентся выпадающий список с найденными записями, так у меня эти списки появляются под всеми инпутами с классом search-filed. А мне нужно чтоб появлялся только под тем инпутом в котором я ввожу данные...

Это все нужно мне чтоб сделать выбор из выпадающего списка...
...
Рейтинг: 0 / 0
14.08.2016, 13:31
    #39291577
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlack,

Вы проверяли работу примеров, что Вам приводили?

Последний пример иллюстрирует Вашу проблему или нет?
...
Рейтинг: 0 / 0
14.08.2016, 13:41
    #39291578
MBlack
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
бухалтер фантоцциMBlack,

Вы проверяли работу примеров, что Вам приводили?

Последний пример иллюстрирует Вашу проблему или нет?

Да то что дали Вы иллюстрируют проблему.....
И как ее решить?
...
Рейтинг: 0 / 0
14.08.2016, 13:45
    #39291580
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlack,

Вот один из вариантов, как можно сделать, но Вы должны сами выбрать реализацию, много зависит от Вашей специфики.
Передавайте в функцию admin.searchProduct() ссылку на this или this.parentNode

Надеюсь Вы понимаете, в чём именно проблема?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
  <div class="admin-center">
    <div class="section-slider-action">
      <input class="search-filed" value="a" />
      <div class="resultmaterial">-</div>
    </div>  
    <div class="section-slider-action">
      <input class="search-filed" value="b" />
      <div class="resultmaterial">-</div>
    </div>  
    <div class="section-slider-action">
      <input class="search-filed" value="c" />
      <div class="resultmaterial">-</div>
    </div>  
  </div>
  <script>
    $('.admin-center').on('keyup', '.section-slider-action .search-filed', function() {
        var resultNode = this.parentNode, fastResult = '.section-slider-action .resultmaterial';
        var i, obj, nList = $(fastResult);
        for (i=0; i < nList.length; i++) {
            if (nList[i].parentNode == resultNode) {
                obj = nList[i];
            }
        }
        $(obj).html($(this).val());
//      ...
//      if (...) {
//         $(obj).html(html);
//         $(obj).show();
//      } else {
//         $(obj).hide();
//      }
//      ...
    });
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
14.08.2016, 22:32
    #39291679
Фёдор К
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Одинаковые элементы и одинаковые события
MBlackЧто не так сделано?
...
В чем заключается неоптимальность кода?
Я не стал разбираться в ваших косноязычных объяснениях, но, если правильно понял задачу нужно при вводе первых букв выдавать в списке совпадающие значения, чтобы пользователь смог выбрать нужный (быстрый ввод).

Таким образом решение: вытряхнуть на помойку этот велосипед и добавить виджет jQuery UI Autocomplete ( https://jqueryui.com/autocomplete/).

Если же охота потратить свое время - то, на вскидку, нафиг тут лиснеры - в инпуте тупо декларативно привинтить функцию на onkeyup="..." и передавать в нее this.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Одинаковые элементы и одинаковые события / 23 сообщений из 23, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]