2017-07-27 27 views
0

我如何可以訪問的輸入文本字段,其中DOM後propably加載的值之後加載輸入的值?訪問被該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觸發插件,將與輸入創建表單,我無法訪問。

希望,有人得到了我的問題的愛迪爾...

編輯: OK,我已經在這個元素,並用它工作的ID,但只有文本中找到一個ID,我有鍵入。該插件給了我一個下拉選擇(像ajax自動完成),我可以選擇一個無序列表與一些李的。但在那裏我無法獲得價值?如果有人點擊自動填充(li's),我該如何獲得價值?

我嘗試:

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

使用事件代表團 –

回答

1

上動態創建的元素,使用事件代表團附加事件偵聽器。

附加事件監聽到DOM的負載存在的父元素,然後傳遞您希望將事件委託給元素:

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

首先,你給出的代碼不向右看。請參考jQuery的手冊:http://api.jquery.com/on/ 這可能是:

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

正如你所說,findbox-住址「與ID的格‘’觸發的插件,這將與輸入創建表單」 如果可以跟蹤該事件的DIV「findbox-ADRESS」獲得點擊或觸發時,你可以很容易地檢查表格是否已經在DOM中添加或不然後使用$檢查輸入字段(「輸入#myTextbox1」) .VAL();

或者,如果你不能跟蹤裝載形式的情況下,你需要在表格是越來越加載到DOM中有一個功能隨時查詢。這可能是使用setTimeout()或框架/庫的任何其他方法。最後在表單加載時停止跟蹤。