javascript - jQuery不会删除div

我的表单中添加了一些动态操作。我有一张桌子，里面有几排位置
申请者。有一个要约位置按钮，当他们单击要约按钮时，我要插入要提交和更新的要约字段。我可以插入字段，但是当我单击“取消交易”按钮时，无法将其清空以生成表单的div addapptrans。下面是代码。我知道这一定是我想念的简单事情。

<head>
<script type="text/javascript">

    $(function(){
        $(".offerposition").click(function(){
            var row = $(this).closest('tr').find('td:nth-child(1)').text();

            alert('You clicked on ' +row);
            $("#addapptrans").empty();
            $("#addapptrans").append(
                $("<input>").attr('type','hidden').attr( 'value',row).attr('Name','Mchposid'))
            .append(
                $("<input>").attr('type','submit').attr( 'value','Complete Offer').attr('id','completeoffertrx').attr('name','completeoffertrx').addClass("buttonlarge buttonmargin")
            ).append(
                $("<input>").attr('type','button').attr( 'value','Cancel Transaction').attr('id','canceloffertrx').attr('name','canceloffertrx').addClass("buttonlarge buttonmargin")
            );

        }
        )
    }
    );

    $(function(){
        $("#canceloffertrx").click(function(){
         $("#addapptrans").empty();

        })
    })
</script>
</head>
<body>

<form >

    <div id="addapptrans"></div>
    <p class="posttitle">Positions applied For</p>
    <table class="tabpositions">

        <tbody>
        <tr>
            <th class="position">Position</th>
            <th class="department">Department</th>
            <th class="dateapp">Date Applied</th>
            <th class="appdate">Offer?</th>
        </tr>

        <tr>
            <td style="display: none;">2281</td>
            <td>Building Service Worker - Part time</td>
            <td>Environmental Services</td>
            <td>08/13/2001</td>
            <td><input type="button" class="offerposition" value="Offer Position"></td>
        </tr>
        </tbody>
    </table>

</form>

最佳答案

这段代码在这里：

$(function(){
    $("#canceloffertrx").click(function(){
        $("#addapptrans").empty();
    })
})

在页面上的#canceloffertrx存在之前运行。因此，$("#canceloffertrx").click(fn)匹配页面上的零个元素，并将单击处理程序绑定到所有零个元素。

您可以通过将单击处理程序绑定到文档或存在的最接近的父级来解决此问题。

$('#addapptrans').on('click', '#canceloffertrx', function(){

这表示当元素#addapptrans收到单击事件，并且与选择器#canceloffertrx匹配的元素是实际被单击的元素时，触发事件处理函数。

或在创建按钮时绑定单击处理程序。

$("<input>")
  .attr('type','submit')
  .attr( 'value','Complete Offer')
  .attr('id','completeoffertrx')
  .attr('name','completeoffertrx')
  .addClass("buttonlarge buttonmargin")
  .click(function() { ... });

最后，提供一些样式建议：)特别是在链接jQuery方法时，您可以将每个调用放在自己的行上，这使它更具可读性。

而且您还应该知道attr()可以接受一个对象作为参数，只允许调用一次即可设置许多属性。

$("<input>")
  .attr({
    type:  'submit',
    value: 'Complete Offer',
    id:    'completeoffertrx',
    name:  'completeoffertrx'
  })
  .addClass("buttonlarge buttonmargin")
  .click(function() { ... });