Question

我有一个表单，我在其中添加了一些动态操作。我有一张桌子，里面有几排位置申请人申请。有一个提供位置按钮，当他们点击提供按钮时，我想插入要提交和更新的优惠字段。我可以插入字段但是当我点击取消事务按钮时，我无法清空表格所在的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>

Answer 1

这段代码：

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

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

您可以通过将点击处理程序绑定到文档或相应的最近父级来修复此问题。

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

这表示当元素#addapptrans收到click事件，并且匹配选择器#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() { ... });

Jquery不会删除div

1 个答案: