点击事件上的jquery提交表单只能运行一次

时间:2014-07-10 10:26:07

标签: jquery forms

我在提交表单时遇到问题。

首先,这是我的表格:

<div class="table">
    <form action="galerie" method="POST" id="gestGal">
        <div class="tableHead">
            <span>Selection</span>
            <span>Nom de la Galerie</span>
            <span>Description</span>
            <span>Action</span>
        </div>
        <div class="tableBody">
            <?php $b = $pdo->findAll(); foreach ($b as $k) : ?>
            <div class="tableBodyElem">
                <span>
                    <div class="checkContent">
                        <label for="elem">
                            <div class="boxes">
                                <input type="checkbox" id="elem_<?= $k->id;?>" name="check[]" value="<?= $k->id;?>"/>
                                <label for="elem_<?= $k->id;?>" value="<?= $k->id;?>"></label>
                            </div>
                        </label>
                    </div>
                </span>
                <span><?= $k->title;?></span>
                <span><?= $k->description;?></span>
                <span class="tableIcons">
                    <img src="path/to/modif.png" alt="modifier" class="modifImg" data="<?php  echo $k->id; ?>">
                    <img src="path/to/suppr.png" alt="supprimer" class="supprImg" data="<?php  echo $k->id; ?>">
                </span>
            </div>
        <?php endforeach; ?>
    </div>
    <div class="tableFooter">

        <span class="inputSub">
            <input type="submit" name="suppr" id="suppr" value="suppprimer" class="subs">
            <input type="submit" name="modif" id="modif" value="modifier"  class="subs">
        </span>
    </div>
</form>
</div>

这是jquery部分:

jQuery(function($)

    $(".subs").on('click',function(event) {
    var subId       = event.target.id;
    var parent      = $(this).parents("form");
    var elemChecked = parent.find('checkbox');
    var elemId      = [];
    parent.find("input[type=checkbox]:checked").each(function() {
        elemId.push($(this).val());
    });  
    if (subId == 'suppr') {
         var action      = "path/to/php_file";
         if (elemId === null){elemId = "no element selected";}else{
            $(".ajax").fadeIn('fast');
            $("#ajax_content").load(action,{"check[]":elemId});
        }
    }else if (subId == 'modif') {
        var action      = "path/to/php_file";
        if (elemId === null){elemId = "no element selected";}else{
            $(".ajax").fadeIn('fast');
          $("#ajax_content").load(action,{"check[]":elemId});
        }
    };
    return false;
});

});

我的问题是:

如果我点击“#suppr”,则负载正常。

然后我取消选择更改或修改所选项目,然后它将不再有效。

我换了:

if (subId == 'suppr') {
         var action      = "path/to/php_file";
         if (elemId === null){elemId = "no element selected";}else{
            $(".ajax").fadeIn('fast');
            $("#ajax_content").load(action,{"check[]":elemId});
        }
    }else if (subId == 'modif') {
        var action      = "path/to/php_file";
        if (elemId === null){elemId = "no element selected";}else{
            $(".ajax").fadeIn('fast');
          $("#ajax_content").load(action,{"check[]":elemId});
        }
    };

by:

if (subId == 'suppr') {
   console.log('suppr');
}else if (subId == 'modif') {
    console.log('modif');       
};

然后我得到我在提交按钮上的每次点击。

所以我开始认为问题在于装载部分。

我在堆栈和网络上搜索并找到了一些回复,但我似乎无法理解为什么以及如何克服这个问题。

我必须使用每个或有没有办法重新加载我加载的页面或有更好的方法来做它?

欢迎任何帮助和解释。

非常感谢。

++++++++++++++ EDIT ++++++++++++++

Here goes the Jsfiddle

我通过.append()同样的问题改变了.load()

0 个答案:

没有答案