Javascript 访问在dom之后加载的输入值
如何访问可能在dom之后加载的输入文本字段的值 我现在正在处理传单,一个插件创建了一个输入字段,我不知道如何访问它 如果我尝试这样做:Javascript 访问在dom之后加载的输入值,javascript,jquery,leaflet,openstreetmap,Javascript,Jquery,Leaflet,Openstreetmap,如何访问可能在dom之后加载的输入文本字段的值 我现在正在处理传单,一个插件创建了一个输入字段,我不知道如何访问它 如果我尝试这样做: $('#myTextbox1').on('input', function() { alert($('#myTextbox1').val()); }); 我没有得到任何结果。我猜jQuery无法处理创建的输入字段 我的HTML如下所示: @extends('layouts.app') @section('head') <link rel="st
$('#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>
在动态创建的元素上,使用事件委派来附加事件侦听器 将事件侦听器附加到DOM加载上存在的父元素,然后传递要将事件委托给的元素:
$('body').on('input', '#myTextbox1', function() {
alert($('#myTextbox1').val());
});
首先,您给定的代码看起来不正确。请参阅jQuery手册: 这可能是:
$( "body" ).on( "click", "input#myTextbox1" function() {
console.log( $( this ).val() );
});
正如您所说,ID为findbox address的div触发插件,插件将使用输入创建表单
如果可以在单击或触发div“findbox address”时跟踪事件,则可以轻松检查表单是否已添加到DOM中,然后使用$inputmyTextbox1.val检查输入字段
或者,如果无法跟踪加载表单的事件,则需要有一个函数在表单加载到DOM中时始终进行检查。框架/库可能使用setTimeout或任何其他方法。最后在加载表单时停止跟踪。使用事件委派
$('body').on('input', '#myTextbox1', function() {
alert($('#myTextbox1').val());
});
$( "body" ).on( "click", "input#myTextbox1" function() {
console.log( $( this ).val() );
});