powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Одинаковые элементы и одинаковые события
23 сообщений из 23, страница 1 из 1
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #39291389
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlack,
id - это уникальное значение
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291409
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Id - у меня же есть на input , с именем search-field.
Мне нужно чтоб они одинаково назывались, на них всех повешен одинаковый обработчик, просто нужно чтоб обработчик относился к конкретному инпуту
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #39291416
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
У меня следующая ситуация, когда я ввожу данные в инпут какой то, у меня происходит поиск данных, и выпадает список с найденными записями, но когда я выпадает список то он одновременно выпадает род всеми инпутами, а мне нужно чтоб он выпадал род тем инпутом, где я ввожу строку.
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291419
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlackУ меня следующая ситуация, когда я ввожу данные в инпут какой то, у меня происходит поиск данных, и выпадает список с найденными записями, но когда я выпадает список то он одновременно выпадает род всеми инпутами, а мне нужно чтоб он выпадал род тем инпутом, где я ввожу строку.
чукча писатель?
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291439
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Товарищи как мне сделать, то что я указал?
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291445
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlackУ меня следующая ситуация, когда я ввожу данные в инпут какой то, у меня происходит поиск данных, и выпадает список с найденными записями, но когда я выпадает список то он одновременно выпадает род всеми инпутами, а мне нужно чтоб он выпадал род тем инпутом, где я ввожу строку.
Покажите код, что список рисует, а не тот, что keyup обрабатывает.
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #39291458
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Что не так сделано?
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291467
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlackЧто не так сделано?
добавил инпут — присвой ему уникальный id, и сним работай
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291473
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Получается, различные id у всех инпутов, а как тогда привязать одно событие к ним всем...
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291486
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlack,
по классу
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291521
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Можно пример написать..., если не трудно
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291550
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlackМожно пример написать..., если не трудно
трудно разбираться в неоптиманом коде.
решается просто , если передавать на сервер id инпута, и обратно его возвращать, и по этому id направлять ответ от сервера нужному
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #39291552
MBlack
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
В чем заключается неоптимальность кода?
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #39291577
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
MBlack,

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

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

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

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

Да то что дали Вы иллюстрируют проблему.....
И как ее решить?
...
Рейтинг: 0 / 0
Одинаковые элементы и одинаковые события
    #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
Одинаковые элементы и одинаковые события
    #39291679
Фёдор К
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
MBlackЧто не так сделано?
...
В чем заключается неоптимальность кода?
Я не стал разбираться в ваших косноязычных объяснениях, но, если правильно понял задачу нужно при вводе первых букв выдавать в списке совпадающие значения, чтобы пользователь смог выбрать нужный (быстрый ввод).

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

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


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