I can't run jquery select change events

Question

I have a mod. I have 2 selects in this modal. When the user selects, I print it to the textarea. My modal is in partial . But on the jquery side, select changes do not work, what can I do? can you help me?

$('#duzenlekisitselect').change(function() {
  console.log($("#kisitduzenle").val())
  var bosluk = " ";
  var deger = $("#kisitduzenle").val();
  $("#kisitduzenle").val(deger + bosluk + this.value);
});

$('#duzenlesahaselect').change(function() {
  var bosluk = " ";
  var deger = $("#kisitduzenle").val();
  $("#kisitduzenle").val(deger + bosluk + this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mb-3">
  <label class="form-label" for="duzenlesahaselect">Saha</label>
  <br />
  <select style="width:100% !important" class="js-data-example-ajax form-select" id="duzenlesahaselect">
    <option value="">Lütfen Saha Seçin</option>
    <option value="AND StokKodu">STOK KODU</option>
    <option value="AND StokAdi">STOK ADI</option>
  </select>
</div>
<div class="mb-3">
  <label class="form-label" for="duzenlekisitselect">Kısıt</label>
  <br />
  <select id="duzenlekisitselect" style="width:100% !important" class="js-data-example-ajax form-select">
    <option value="">Kısıt Seçin</option>
    <option value="IN ()">Göster</option>
    <option value="NOT IN ()">Gösterme</option>
  </select>
</div>
</div>
<!--end col-->

<div class="col-md-6">
  <div class="mb-3">
    <label class="form-label">Kısıt Girin<span class="text-danger">*</span></label>
    <textarea id="kisitduzenle" rows="4" placeholder="Lütfen Kısıt Giriniz" required type="text" class="form-control">@Model.Kisit</textarea>
  </div>
</div>
<!--end col-->
<div class="col-lg-12 text-end">
  <button type="submit" onclick="KisitDuzenleKaydet(@Model.ID)" class="btn btn-primary">Kaydet</button>
</div>
<!--end col-->
</div>

I put an alert inside the change events, none of them open. So change events are not working

I've turned your code into a snippet and it seems to do what it's meant to. Do you have any errors in your console or are you sure you are running the js in the correct place? — Pete, Mar 28 '23 at 13:14
I don't have any errors in console. It works in the correct place in javascript. This process is spinning in Modal, could it be because of it? — Ahmet Enes Söylemez, Mar 28 '23 at 13:20
When your code is in a modal, it depends on how the code got in that modal. Quite likely, the modal was also moved to the DOM room (body) from wherever it was defined so that it's not confined to an enclosing div. This means the elements have likely been recreated and all assigned events lost. The easiest solution is to change `$('#duzenlekisitselect').change(function() {` to `$(document).on("change", '#duzenlekisitselect', function() {` — freedomn-m, Mar 28 '23 at 13:22

score 0 · Answer 1 · answered Mar 28 '23 at 16:26

Try this code instead, this should work yet you will need to ensure you have an <html><body> at the start and </body></html> at the end of your page

    function debug()
    {
        console.log('duzenlekisitselect', $("html body #duzenlekisitselect").val());
        console.log('duzenlesahaselect', $("html body #duzenlesahaselect").val());
    }

    $( "html body #duzenlekisitselect" ).on( "change", function() {
        var bosluk = " ";
        var deger = $("html body #kisitduzenle").val();
        $("html body #kisitduzenle").val(deger + bosluk + $(this).val());
        debug();
    });

    $( "html body #duzenlesahaselect" ).on( "change", function() {
        var bosluk = " ";
        var deger = $("html body #kisitduzenle").val();
        $("html body #kisitduzenle").val(deger + bosluk + $(this).val());
        debug();
    });
});

I can't run jquery select change events

1 Answers1