jQuery动态创建的输入不发布 [英] Jquery dynamically created inputs not posting
问题描述
我有一个表单,其中的输入是使用Jquery动态创建的.如果我对元素进行硬编码,就像使用Jquery创建的元素一样,则可以很好地获取POST数据.但是,当动态创建元素时,它们不会提交其POST数据.
I have a form that has inputs being created dynamically with Jquery. If I hardcode an element exactly like it is being created with Jquery, I get the POST data fine. But when the elements are created dynamically, they do not submit their POST data.
用于创建元素的Jquery(使用Jquery-UI拖放元素,将其拖放到该区域时会创建一个新元素).
The Jquery for creating the elements (using Jquery-UI to drag and drop an element, when it is dropped it creates a new element in that area).
$(".drop-container").droppable({
accept: ".draggable",
addClasses: false,
drop: function (event, ui) {
var drag_name = ui.draggable.html();
ui.draggable.hide();
var new_body_count = '<tr><td class="btn btn-primary">' + drag_name + '</td><td class="badge"><input placeholder="Number of Kills" name="body_count" class="number-count" type="number"></td></tr>'
$('.table').prepend(new_body_count)
}
});
它创建的HTML-
<tr>
<td class="btn btn-primary">
<span class="glyphicon glyphicon-resize-vertical" aria-hidden="true">
<input type="hidden" name="actor_id[]" value="162705079">
</span>
Julie Benz - J
</td>
<td class="badge">
<input placeholder="Number of Kills" name="body_count" class="number-count" type="number">
</td>
</tr>
它肯定在form标记内.就像我说的那样,如果我对html进行硬编码,它可以发布,但是当输入由Jquery创建时,就不会发布.我很确定可以动态创建它.
It is definitely inside of the form tag. Like I said, if I hardcode the html, it POSTS fine, but when the inputs are created by Jquery, no post. I am quite sure something to do with it being dynamically created.
编辑-
$('#update_form').on('submit', 'form', function(){
$('.abridged-hide input').attr('disabled', true);
$('.unabridged-hide input').attr('disabled', true);
});
编辑-HTML表单的代码
edit - the code for the HTML form
<legend class="text-center">Film title: <?=$film_title_text?></legend>
<div class="col-md-3">
<?=form_open('update/add_category');?>
<label for="category">Category Title</label>
<?=form_input($cat_title, '');?>
<button type="submit" class="btn btn-primary">Add Category</button>
<?=form_close();?>
</div>
<div id="event_form" class="col-md-6">
<?=form_open('/update/save_entry', $update_id);?>
<?php if(isset($thenav['nav_id'])){?>
<input type="hidden" name="film_id" value="<?=$q?>">
<div class="form-group">
<label for="add_category">Add Category</label>
<?=form_dropdown('cat_id', $cat, '', $cat_id );?>
</div>
<div class="form-group">
<label for="heading">Article Title</label>
<?=form_input($title, '');?>
</div>
<div class="well">
<div class="form-group">
<label for="heading">Add Custom Body Count Field</label>
<input type="text" class="form-control" name="body_count">
<button class="btn btn-primary" id="custom_body_cnt">Add Custom Body Count Field</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Abridged Cast</div>
<div class="panel-body abridged-hide">
<?php
foreach ($this_actors as $this_actor['name']) {
$characters = $this_actor['name']->name;
if(isset($characters[0])){
$characters = $characters[0];
}else{
$characters = '';
}
echo "<span class='btn btn-primary draggable'><input type='hidden' class='actor_field' name='actor_id[]' value='".$this_actor['name']->id."'><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span> ".$this_actor['name']->name." - ".$characters."</span>";
}?>
</div>
</div>
<button id="slide-abridged" class="btn wide-button"><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span></button>
<div class="panel panel-primary">
<div class="panel-heading">Unabridged Cast</div>
<button id="slide-unabridged" class="btn wide-button"><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span></button>
<div class="panel-body unabridged-hide">
<?php
foreach ($unabridged_actors as $this_actor['name']) {
$characters = $this_actor['name']->characters;
if(isset($characters[0])){
$characters = $characters[0];
}else{
$characters = '';
}
echo "<input type='text' name='actor_name' value='".$this_actor['name']->id."'>";
echo "<span class='btn btn-primary draggable'><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span> ".$this_actor['name']->name." - ".$characters."</span>";
}?>
</div>
</div>
<button id="slide-unabridged" class="btn wide-button"><span class='glyphicon glyphicon-resize-vertical' aria-hidden='true'></span></button>
<?=form_textarea($article, '');?>
</div>
<div class="col-md-3">
<span class="label label-default">Body Count Inventory</span>
<div class="well drop-container clearfix">
<table class="table">
<tr>
<td class="btn btn-primary">Total</td>
<td class="badge"><input placeholder="Number of Kills" name="film_total" class="film_total" disabled type="number"></td>
</tr>
</table>
</div>
<button type="submit" id="entry_submit" class="btn btn-primary">Update Page</button>
<?php }?>
<?=form_close()?>
</div>
推荐答案
我怀疑这是一个委派问题,但我仍然不太了解.
As I suspected, it was a delegation issue, but I still don't quite understand it.
这有效-
$('#reg_form').on('submit', function(event){
var address = $('input[name=address]').val();
var city = $('input[name=city]').val();
var state = $('select[name=state]').val();
var zip = $('input[name=zip]').val();
var format_address = address + '+' + city + '+' + state + '+' + zip;
var password = $('input[name=password]').val();
var password_verify = $('input[name=confirm_password]').val();
var email = $('input[name=email]').val();
var confirm_email = $('input[name=confirm_email]').val();
if(email != confirm_email){
event.preventDefault();
$('.text-danger').show();
$('.text-danger').html('Email Address does not match.');
}
if(password != password_verify)
{
event.preventDefault();
$('.text-danger').show();
$('.text-danger').html('Password does not match.');
}
//call google maps api
$.getJSON( "https://maps.googleapis.com/maps/api/geocode/json?address=" + format_address, function( data ) {
console.log(data.results[0].geometry.location.lat);
console.log(data.results[0].geometry.location.lng);
//populate form fields
$('input[name=lat]').val(data.results[0].geometry.location.lat);
$('input[name=lng]').val(data.results[0].geometry.location.lng);
});
$(this).unbind('submit');
});
如果我取消绑定,该表单将不会发布动态生成的值.我从一开始就尝试过一些类似的操作-
If I take out that unbind, the form does not post the dynamically generated values. I had tried a few things likes doing this in the very beginning -
$('.form_container').on('submit', 'form', function(event){
,我尝试了其他一些现在还不能解决的问题.
and I tried a few other things can't thing of right now..binding preventdefault, unbinding preventdefault.
但是就像我说的那样,上面的代码与取消绑定是有效的.也许有人比我更了解绑定和委派.
But like I said, this above code with the unbind works. Maybe someone who knows about about binding and delegation more than me can weigh in on it.
这篇关于jQuery动态创建的输入不发布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!