Zugriff auf den Wert eines Eingangs, der nach dem dom geladen wird

Question

Wie kann ich auf den Wert eines Eingabetextfeldes zugreifen, das nach dem dom wahrscheinlich geladen wird?

Ich arbeite gerade mit Merkblatt und ein Plugin erstellt ein Eingabefeld und ich weiß nicht, wie man darauf zugreifen kann.

Wenn ich versuche dies:

$('#myTextbox1').on('input', function() { 
    alert($('#myTextbox1').val()); 
}); 

bekomme ich kein Ergebnis. Ich denke, jQuery kann das erstellte Eingabefeld nicht verarbeiten.

Mein HTML sieht wie folgt aus:

@extends('layouts.app') 

@section('head') 
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet-search.css') }}"> 
@ensection 

@section('content') 

<div class="col-md-8 col-md-offset-2 form-container"> 

<div id="map-adress"></div> 

<div class="panel panel-default marker-panel"> 
    <div class="panel-heading">Create a post</div> 
    <div class="panel-body"> 
     <div class="col-md-8 col-md-offset-4"> 
      <p>Insert the adress of the marker position<br> 
       (You can move the marker on the map to the right position).</p> 
     </div> 

     <div class="form-group"> 
      <label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label> 
      <div class="col-md-6"> 
       <div id="findbox-adress"></div> 
      </div> 

      <div class="col-md-2"> 
       <button type="submit" class="btn btn-primary user_marker_btn"> 
        Validate 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="user_marker_adress" class="panel panel-default"> 
    <div class="panel-heading">Validate the marker adress</div> 
    <div class="panel-body"> 

     <form class="form-horizontal" method="POST" action="{{ route('userposts.create') }}"> 
      {{ csrf_field() }} 

      <div class="form-group"> 
       <label for="a_street" class="col-md-4 control-label">Street</label> 
       <div class="col-md-6"> 
        <input id="a_street" type="text" class="form-control" name="a_street" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_street_no" class="col-md-4 control-label">Street No.</label> 
       <div class="col-md-6"> 
        <input id="a_street_no" type="text" class="form-control" name="a_street_no" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_zip_code" class="col-md-4 control-label">Zip Code</label> 
       <div class="col-md-6"> 
        <input id="a_zip_code" type="text" class="form-control" name="a_zip_code" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_state" class="col-md-4 control-label">State</label> 
       <div class="col-md-6"> 
        <input id="a_state" type="text" class="form-control" name="a_state" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="a_country" class="col-md-4 control-label">Country</label> 
       <div class="col-md-6"> 
        <input id="a_country" type="text" class="form-control" name="a_country" required> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-md-8 col-md-offset-4"> 
        <button type="reset" class="btn btn-danger"> 
         Clear 
        </button> 
        <button type="submit" class="btn btn-primary"> 
         Next 
        </button> 
       </div> 
      </div> 

     </form> 

    </div> 
</div> 

@endsection

@section('scripts') 
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet.js') }}"></script> 
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet-search.js') }}"></script> 
<script type="text/javascript" src="{{ asset('js/leafleat/marker-adress.js') }}"></script> 
@endsection 

Die div mit der ID "findbox-Adresse" löst das Plugin, das das Formular mit dem Eingang zu schaffen, auf die ich nicht zugreifen kann.

Hoffnung, jemand habe eine idear meines Problems ...

Edit: OK, ich habe eine ID in diesem Element und mit der ID fand es funktioniert, aber nur der Text, dass ich eingegeben. Das Plugin gibt mir eine Dropdown-Auswahl (Autovervollständigung wie Ajax), wo ich eine ungeordnete Liste mit einigen li auswählen kann. Aber da kann ich keinen Wert bekommen? Wie kann ich den Wert erhalten, wenn jemand auf die Autovervollständigung (li's) klickt?

Mein Versuch:

$(".user_marker_btn").click(function(){ 
    console.log($("#searchtext9").val()); 
}); 

Answer 1

Auf dynamisch Elemente erstellt, Event-Delegation verwenden, um Event-Listener anhängen.

den Ereignis-Listener an ein übergeordnetes Element anhängen, die auf DOM-Belastung bestand, und dann das Element übergeben, die Sie wollen, um das Ereignis zu delegieren:

$('body').on('input', '#myTextbox1', function() { 
    alert($('#myTextbox1').val()); 
}); 

Answer 2

Zunächst einmal tut Ihr gegebenen Code nicht schau richtig. Bitte beachten Sie jQuery Handbuch: http://api.jquery.com/on/ Dies könnte sein:

$("body").on("click", "input#myTextbox1" function() { 
    console.log($(this).val()); 
}); 

Wie Sie sagte: „Die div mit der ID‚findbox-Adresse‘das Plugin löst, die das Formular mit dem Eingang schaffen wird“ Wenn Sie kann das Ereignis nachverfolgen, wenn die div 'findbox-adresse' angeklickt oder ausgelöst wird, Sie können leicht nach dem Formular suchen, ob es im DOM hinzugefügt wurde oder nicht und dann nach Eingabefeld suchen mit $ ("input # myTextbox1") .val();

Oder wenn Sie das Ereignis des Ladens des Formulars nicht verfolgen können, müssen Sie eine Funktion haben, um immer zu überprüfen, wann das Formular in das DOM geladen wird. Das könnte setTimeout() oder eine andere Methode von framework/library sein. Und schließlich stoppen Sie die Verfolgung, wenn das Formular geladen ist.