我在下面选择选择第二个表单,通过load()
引入#formContent
div
,效果很好。
<form id="selectform">
<select id="selector" class="form-control" name="selector">
<option value="" selected="selected">Choose your Poison</option>
<option value="website">Website</option>
</select>
</form>
<div id="formContent"> </div>
引入的表格是:
<form id="website">
<div class="control-group form-group">
<label for="name">Name:</label>
<input name="name" type="text" data-path="name">
</div>
</form>
一旦加载,第二种形式的任何输入都应该通过keyup附加一个监听器,这似乎也没问题。
在keyup上我们确实进入了keyup函数,但是我们没有超过$ input.each()函数,并且没有看到data-path属性。
在console.log输出中,我们转到&#34; 1。来到这里&#34;,但不是&#34; 2。来到这里&#34;。
我尝试了很多东西,但无济于事。谁能发现这里到底发生了什么?
使用的jQuery是1.11.3
var mySelector, days = [];
$('#selector').on('change', function() {
var theType = $(this).val();
if(theType != ''){
$('#formContent').load('forms/' + theType + '.html');
var mySelector = '#' + theType;
var element = {}, $input = $(mySelector + ' input,' + mySelector + ' textarea,' + mySelector + ' select');
$(document).on('keyup', $input, function() {
// WE GET THIS FAR
console.log('1. got here.');
element = {};
$input.each(function(e) {
console.log('2. got here.');
if ($(this).data('path')) {
console.log('3. got here. ' + $(this).data('path'));
}
});
});
}
});
答案 0 :(得分:0)
load
操作完成
您需要在&#34;完成&#34;中添加 html 。回电。像api参考。 http://api.jquery.com/load/
$('#formContent').load('forms/' + theType + '.html',function() {
// callback here will make sure the load is complete.
});
代码的小片段。
$('#formContent').load('forms/' + theType + '.html',function() {
var mySelector = '#' + theType;
var element = {}, $input = $(mySelector + ' input,' + mySelector + ' textarea,' + mySelector + ' select');
$(document).on('keyup', $input, function() {
// WE GET THIS FAR
console.log('1. got here.');
element = {};
$input.each(function(e) {
console.log('2. got here.');
if ($(this).data('path')) {
console.log('3. got here. ' + $(this).data('path'));
}
});
});
});
答案 1 :(得分:0)
对于动态内容,您需要使用$('selector')。on(),如$(“#PostItemContainer”)。on(“click”,“。posttitem”,function(){.. 。});
答案 2 :(得分:0)
我认为这是因为你没有使用.load
完整功能作为回调。您的代码在数据出现之前完成:
var mySelector, days = [];
$('#selector').on('change', function() {
var theType = $(this).val();
if(theType != ''){
$('#formContent').load('forms/' + theType + '.html', function ( data ) { //data will be the response once completed. This is only needed if you need to do something with the response data
var mySelector = '#' + theType;
var element = {}, $input = $(mySelector + ' input,' + mySelector + ' textarea,' + mySelector + ' select');
$(document).on('keyup', $input, function() {
// WE GET THIS FAR
console.log('1. got here.');
element = {};
$input.each(function(e) {
console.log('2. got here.');
if ($(this).data('path')) {
console.log('3. got here. ' + $(this).data('path'));
}
});
});
});
}
});