Javascript Jquery不会删除div_Javascript_Jquery_Html_Css

Javascript Jquery不会删除div

javascript jquery html css

Javascript Jquery不会删除div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在表单中添加了一些动态动作。我有一张表，其中有几行位置申请人申请了一份工作。有一个报价公告按钮，当他们点击报价按钮时，我想插入要提交和更新的报价字段。我可以让feilds插入，但当我点击canceltransaction按钮时，我无法让它清空构建表单的divaddapptrans。下面是代码。我知道我错过的一定是一些简单的东西 <head> <script type="text/javascript"> $(function(){ $(".o

我在表单中添加了一些动态动作。我有一张表，其中有几行位置申请人申请了一份工作。有一个报价公告按钮，当他们点击报价按钮时，我想插入要提交和更新的报价字段。我可以让feilds插入，但当我点击canceltransaction按钮时，我无法让它清空构建表单的divaddapptrans。下面是代码。我知道我错过的一定是一些简单的东西

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


$（函数（）{
$（“.offerposition”）。单击（函数（）{
var row=$（this）.closest（'tr'）.find（'td:nth child（1））.text（）；
警报（'您单击了'+行〕）；
$（“#addapptrans”）.empty（）；
$（“#addapptrans”）.append(
$（“”）.attr（'type'，'hidden'）.attr（'value'，row.attr（'Name'，'Mchposid'））
.附加(
$（“”）.attr（'type'，'submit'）.attr（'value'，'Complete Offer'）.attr（'id'，'Complete offertrx'）.attr（'name'，'Complete offertrx'）.addClass（'buttonlarge buttonmargin'））
).附加(
$（“”）.attr（'type'，'button'）.attr（'value'，'Cancel Transaction'）.attr（'id'，'cancelOfferTx'）.attr（'name'，'cancelOfferTx'）.addClass（“buttonlarge buttonmargin”）
);
}
)
}
);
$（函数（）{
$（“#取消报价”）。单击（函数（）{
$（“#addapptrans”）.empty（）；
})  
})
申请的职位
位置
部门
适用日期
提供
2281
建筑服务工人-兼职
环境服务
08/13/2001

此处的代码：

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

在页面上存在

#CancelOfferTx

之前运行。因此，

$（“#cancelOfferTx”）。单击（fn）

匹配页面上的零个元素，并将单击处理程序绑定到所有零个元素

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

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

这表示当元素

#addapptrans

接收到一个click事件，并且与选择器

#cancelOfferTx

匹配的元素是实际被单击的元素时，启动事件处理程序函数

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

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

您能提供一个提琴吗？最好将委派的事件处理程序附加到最近的非更改祖先元素（例如，在这个问题中为

#addapptrans

）<代码>文档是最接近的备份。

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