domの後にロードされた入力の値にアクセス

Question

DOMの後ろに適切に読み込まれる入力テキストフィールドの値にはどうやってアクセスできますか？

私は現時点でリーフレットで作業していますが、プラグインは入力フィールドを作成しており、アクセスする方法はわかりません。

私はこれをしようとした場合：

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

私はどんな結果を得ることはありません。私は、jQueryは作成された入力フィールドを処理できないと思います。

私のHTMLは次のようになります。

@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 

ID "findbox-アドレス" とのdiv要素を入力してフォームを作成するプラグインを、トリガー、私はアクセスできない。

希望は、誰かが私の問題のidearを...得た

編集： OK、私は私が持っていることを、この要素で、それが動作しているIDが、テキストのみでIDを発見しましたプラグインは私にドロップダウン選択（ajaxのようなオートコンプリート）を与えます。ここで私はいくつかの李のリストを選ぶことができます。しかし、私は価値を得ることができないのですか？誰かがオートコンプリート（li）をクリックしている場合、どのように値を取得できますか？

私の試み：動的に作成された要素で

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

Answer 1

、イベントリスナーを添付するイベントの委任を使用します。

はDOM-負荷に存在していた親要素にイベントリスナーを取り付け、その後、あなたがイベントを委任したい要素渡し：すべての

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

Answer 2

まず、自分の与えられたコードはしていません右に見て。 jQueryのマニュアルを参照してください：http://api.jquery.com/on/ これは次のようになります。

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

あなたが言ったように、findbox-アドレス「IDを持つdiv要素は 『』プラグインをトリガーし、入力してフォームを作成します。これは」 をあなた場合div 'findbox-adress'がクリックまたはトリガーされたときにイベントを追跡することができます。フォームがDOMに追加されているかどうかを簡単にチェックして、$（ "input＃myTextbox1"） .val（）;

フォームをロードするイベントを追跡できない場合は、フォームがDOMにロードされるタイミングを常にチェックする機能が必要です。これは、setTimeout（）やその他のフレームワーク/ライブラリのメソッドを使用している可能性があります。最後に、フォームがロードされたときにトラッキングを停止します。