Jquery动态创建的输入不发布答案

【问题标题】：Jquery dynamically created inputs not postingJquery动态创建的输入不发布
【发布时间】：2015-03-24 22:26:22
【问题描述】：

我有一个使用 Jquery 动态创建输入的表单。如果我硬编码一个与使用 Jquery 创建的元素完全相同的元素，我会得到很好的 POST 数据。但是当动态创建元素时，它们不会提交其 POST 数据。

用于创建元素的 Jquery（使用 Jquery-UI 拖放一个元素，当它被拖放时它会在该区域创建一个新元素）。

$(".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>

它肯定在表单标签内。就像我说的，如果我对 html 进行硬编码，它可以发布，但是当输入是由 Jquery 创建时，没有发布。我很确定它与动态创建有关。

编辑 -

$('#update_form').on('submit', 'form', function(){
     $('.abridged-hide input').attr('disabled', true);
     $('.unabridged-hide input').attr('disabled', true);
});

编辑 - HTML 表单的代码

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

【问题讨论】：

您想要$('.table') 中的点吗？你是说获取类名“table”的所有元素。仅此一项就对我有用 $('table').prepend(new_body_count) 在表格元素上。请注意，我删除了点。
不，它实际上是一个名为table的类。 ...可能是类名的错误选择。它确实在我希望它去的地方做前置。

标签： jquery html forms

【解决方案1】：

我想向您询问更多细节，但堆栈溢出不会让我这样做。

无论如何，如果您通过 jQuery 处理提交事件的 POST，则很可能您没有将事件绑定到动态添加的表单。

例如，如果您以这种方式将事件绑定到表单：

$("form").on("submit", function(){
    //do POST stuff
})

它只会将事件附加到绑定事件时 DOM 中的表单。

为了将事件绑定到动态元素，您必须通过非动态元素来完成。例如，假设您的表单被包裹在一个 id 为 forms-container 的 div 中。然后你可以像这样附加事件：

$("#forms-container").on("submit", "form", function(){
    //do POST stuff
})

这样，事件将附加到#forms-container 内的所有元素，包括动态添加的元素。

【讨论】：

POST 全部由 PHP 在另一个页面上处理。但我确实需要在提交之前禁用其他一些项目......如果你看到我的编辑，我试过了，但它没有禁用，它仍然没有发布动态元素。
我已经阅读了 Jquery 文档和委托...这与您建议的 jrlainfiesta 完全一样。我在表单之外创建了一个 div 并像这样引用它..似乎我可以从动态创建的元素中获取值，但我仍然无法从 PHP 访问它们。我想我应该能够做 AJAX，但我真的更喜欢只使用 PHP。
嗯，我仍然不确定你是如何做事的。您能否编辑您的问题以包括您如何制作 html 表单？
我已经添加了我的确切代码。需要破译的内容很多，其中很多是由 php 生成的（我使用的是 codeigniter 框架字，我没有在编辑代码中包含表单变量）。生成的动态代码来自我帖子顶部的 javascript。当您从拖放中拖放项目时，您可以看到它会将其添加到 .table 中。这一切都很好，它出现了。 ...我推测 Jquery 没有正确地冒泡/授权。我排除了糟糕的 HTML 搞砸了，因为如果我硬编码它就像它生成时一样，它确实可以正常发布。
有一次，我确实删除了此页面上的另一个表单，只留下了有问题的表单，我确实将它包装在一个 div 中并使用上面的 .on 代码。 ...就像它在 jquery 文档中显示的那样。 ...当我发布时，所有其他表单 POST 变量都会显示在检查器中...除了生成的输入。 ...但同样，如果我对它们进行硬编码，它们确实会出现在帖子中。

【解决方案2】：

正如我所怀疑的，这是一个授权问题，但我还是不太明白。

这行得通 -

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

如果我取消绑定，表单不会发布动态生成的值。我一开始就尝试过一些事情，比如这样做 -

$('.form_container').on('submit', 'form', function(event){

我尝试了其他一些目前无法解决的问题。绑定 preventdefault，解除绑定 preventdefault。

但就像我说的那样，上面的解除绑定的代码可以工作。也许比我更了解绑定和委托的人可以参与其中。

【讨论】：