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屋！