как запустить jquery скрипт на обработчике событий

Question

я хочу запускать jquery скрипт каждый выбор changed.

пример у меня html вот так

<select name="typedata[]" data-long="long0" onchange="myFunction()">
     <option value="" label="default"></option>
     @foreach ($typeDatas as $typeData)
          <option value="{{ $typeData['nama'] }}">{{ $typeData['nama'] }}</option>
     @endforeach
</select>

и скрипт такой

function myFunction(){
  console.log(jQuery(this).val())
}

jquery возвращает ошибку при изменении выбора.

есть ли способ запустить jquery скрипт внутри myFunction, потому что если я использую javascript не jquery его работу ..

я не могу использовать что-то подобное jQuery(document).ready(function($), потому что select было добавлено, когда пользователь нажимает на button, чтобы добавить select form.

Answer 1

Новый элемент select не имеет обработчика событий, потому что он был создан после рендеринга dom. Однако вы можете использовать обработчик on для привязки элемента независимо от того, отображается он в DOM или нет. надеюсь это поможет.

https://api.jquery.com/on/

$('html #formID').on("change","select", function(){
   // do something...
})

Также можно удалить onchange="myFunction()". :)

Answer 2

Для стиля jQuery вы должны сделать что-то вроде:

<select name="typedata[]" data-long="long0" class="class-name">
<option value="" label="default"></option>
 @foreach ($typeDatas as $typeData)
      <option value="{{ $typeData['nama'] }}">{{ $typeData['nama'] }}</option>
 @endforeach
</select>

А затем:

$('document').on('change', '.class-name', function(){
    console.log($(this).val());
});

это связывает событие change со статией c и * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * c.