访问在 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-adress”的 div 会触发插件，该插件将使用我无法访问的输入创建表单。

希望有人对我的问题有所了解...

编辑： 好的，我在这个元素中找到了一个 ID，并且它正在使用它的 ID，但只有我输入的文本。插件给了我一个下拉选择（像 ajax 一样的自动完成），我可以在其中选择一个带有一些的无序列表李氏但是我无法获得价值？如果有人点击自动完成（li's），我如何获得价值？

我的尝试：

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

Answer 1

在动态创建的元素上，使用事件委托来附加事件监听器。

将事件侦听器附加到 DOM-load 时存在的父元素，然后传递您希望将事件委托给的元素：

$('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() );
});

正如您所说，“ID 为“findbox-adress”的 div 会触发插件，该插件将使用输入创建表单” 如果您可以在单击或触发 div 'findbox-adress' 时跟踪事件，则可以轻松检查表单是否已添加到 DOM 中，然后使用 $("input#myTextbox1 ").val();

或者，如果您无法跟踪加载表单的事件，您将需要一个函数来始终检查表单何时加载到 DOM 中。这可能是使用 setTimeout() 或框架/库的任何其他方法。最后在表单加载时停止跟踪。