Question

我正在尝试构建一个可以使用HTML和Javascript动态编辑的表。

我在父表的行中有一个按钮，我想在单击一个按钮时在父表中创建一个子表。但是我的jquery没有被点击。

班级名称是.childtbl。

修改

我在每一行都创建了按钮colume propmotional标题。按钮只能在第一行点击，我也可以创建表格行，但在第二行我不能克隆表按钮的onlcick！我不知道为什么函数没有调用。你可以在代码片段中看到我的代码

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='test'  method="post">
    <label class="label"> <strong> Warishan Names <strong> </label>
    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>S. No</th>
                <th>Promotional Header</th>
                <th>promotional Titile</th>
            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' name='wname[]'/></td>
                <td><button type="button" class='btn btn-success childtbl'>+ add new Title</button> <br>
                    <table id="form_table1" class="table table-bordered">
                        <tr class='case1'>
<!--                       

         <td><span id='snum1'>1.</span></td>-->
    <!--                            <td><input class="form-control" type='text' name='wr[]'/></td>-->
                            </tr>
                        </table>
                    </td> </tr>
            </table>
            <button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>

＆＃13;

SELECT c,cop.product /* cop.product => refers to property which has an association with product entity */
FROM XyzBundle:Customer c
    LEFT JOIN c.orders co
    LEFT JOIN co.products cop
    LEFT JOIN c.cancellation ca
    LEFT ca.productContainers cap
    LEFT cap.product capp WITH capp.product = cop.product
WHERE capp.product IS NULL

＆＃13;

Answer 1

问题在于您创建点击事件的方式。它们是在DOM加载并与当前按钮关联时创建的，但是当您创建一个按钮时，该事件与它无关。

要解决此问题，您可以使用委派活动。使用on（）函数作为外部元素（例如，总是存在，例如表@ form_table），并创建与内部按钮相关联的单击事件。所以改变这个......

$(".childtbl").on('click', function () {

......这个......

$('table#form_table').on('click','button.childtbl',function(e) {

...因此该事件适用于预先存在的按钮或动态生成的按钮。新$(this)函数内的on仍将与按钮（不是表格）相关联。

我希望它有所帮助

Answer 2

搞定了。几点：

您的事件监听器不应该尝试收听动态添加的内容（请参阅this question），请参阅此代码段的JS部分中的第8行
您尝试按其ID（var count1 = $('#form_table1')[0].rows.length;和$('#form_table1').append(data1);）检索子表。您必须动态查找单击按钮所在的行，这可以通过jQuery事件侦听器中this的值来实现，请参阅第9行

$(document).ready(function(){
    $(".addmore").on('click', function () {
        var count = $('#form_table')[0].rows.length;
        var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
        data += "<td><input class='form-control' type='text' name='wname[]'/></td><td><button type=\"button\" id='newtrbtn' class='btn btn-success childtbl'>+ add new Title</button><table class='table table-bordered'></table></td></tr>";
        $('#form_table').append(data);
    });
    $('form#test').on('click', '.childtbl', function () {
        var $titlesTable = $(this).next('table')[0];
        var titlesCount = $titlesTable.rows.length + 1;
        var data1 = "<tr class='case1'><td><span id='snum1" + titlesCount + "'>" + titlesCount + ".</span></td>";
        data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
        $($titlesTable).append(data1);
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='test' method="post">
    <label class="label"> <strong> Warishan Names <strong> </label>
    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>S. No</th>
                <th>Promotional Header</th>
                <th>promotional Titile</th>
            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' name='wname[]'/></td>
                <td><button type="button" class='btn btn-success childtbl'>+ add new Title</button>
                    <table class="table table-bordered"></table>
                </td>
            </tr>
          </table>
          <button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>

单击按钮时创建子表

2 个答案: