追加jQuery 1.9.1后按钮不起作用

问题描述

以下是代码：

我对jQuery还是很新鲜的。我想要做的就是添加和删除按钮，当添加被按下时会添加一行，并删除点击该按钮的行。出于某种原因，添加按钮在第一次追加后停止工作。如果我做了一个克隆，就像注释掉的代码一样，添加按钮在第一次删除后停止工作。任何想法？

HTML：

 < table border =1name =phoneTableid =phoneTablewidth =100％> 
< thead> 
< tr> 
< th>主要< / th> 
< th>键入< / th> 
< th>电话号码< / th> 
< th>详情< / th> 
< th>添加< / th> 
< th>删除< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>< input type =radioname =phonePrimary []/>< / td> 
< td> 
< select style =name =phoneType []> 
< option value =1> NOT COMPLETED< / option> 
< option value =2> MOBILE< / option> 
< option value =3> HOME< / option> 
< option value =4> WORK< / option> 
< option value =5> NEAR BY< / option> 
< / select> 
< / td> 
< td>< input type =textstyle =width：200px; name =phoneNumber []/>< / td> 
< td>< input type =textname =phoneDetails []/>< / td> 
< td><按钮类型=按钮id =addButton> +添加< /按钮>< / td> 
< td><按钮类型=按钮id =deleteButton>  - 删除< /按钮>< / td> 
< / tr> 
< / tbody> 
  

JS：

  $（＃addButton）。on（click，function（）{
 alert （ 单击Add！）; 
 $（ '＃phoneTable TR：最后'）。之后（'< TR>< TD><输入类型= 无线电 名称= phonePrimary [] />< / TD>< TD><下拉：DropdownPhoneType实体= $ {applicationBean.phoneTypes} 名称= PHONETYPE []/>< / TD>< TD><输入类型=textplaceholder =[phone]class =phone-mask textfielddata-tooltip =请输入一个有效的< b>数字< / b>style =width：200px;name = phoneNumber的[]/>< / TD>< TD><输入类型= 文本 名称= phoneDetails []/>< / TD>< TD><按钮类= 按钮按钮黑 类型= 按钮 ID = Add按钮 > +添加< /按钮>< / TD>< TD><按钮类= 按钮按钮黑 类型= 按钮 ID =deleteButton>  - 删除< /按钮>< / td>< / tr>'）; 
 // $（'＃phoneTable tbody> tr：last ）.clone（真，真）.appendTo（ ＃phoneTable）; 
 $（'＃phoneTable tbody> tr：last'）。prev（）。find（button [id ='addButton']）。remove（）; 
}）; $（$＃
 $ b $（＃deleteButton）。on（click，function（）{
 if（$（＃phoneTable tbody> tr）。length< = 1） {
 
 return false; 
} 
 $（'＃phoneTable tbody> tr：nth-​​last-child（2）> td：nth-​​last-child（2 ）'）。append（'< button type =buttonid =addButton> + Add< / button>'）; 
 $ 
 $（'＃phoneTable tbody> tr： （）; $ b $（'＃phoneTable tbody> tr：last'）。remove（）; 
}）; 
 // alert （'Delete Clicked'）; 
}）; 
  

解决方案

.on它确实如此。如果您希望将事件委托（以旧的方式，实况），您需要将事件绑定到父项，并将其传递给一个可选的选择器参数。因此，对于在hander初始绑定后动态添加的元素，您需要像这样绑定事件：

  $（ ''body'）。on（'click'，'#addButton'，function（）{
 // code here 
}）; 
  

请参阅：

Here is the code: http://jsfiddle.net/cwWWN/

I'm still fresh to jQuery. All I'm wanting to do is have an Add and Delete button that'll add a row when the Add is pushed and Delete the row that the button is clicked on. For some reason, the Add button stops working after the first append. If I do a clone, like the commented out code, the Add button stops working after the first Delete. Any ideas?

HTML:

<table border="1" name="phoneTable" id="phoneTable" width="100%">
<thead>
    <tr>
        <th> Primary </th>
        <th> Type </th>
        <th> Phone Number</th>
        <th> Details </th>
        <th> Add </th>
        <th> Delete </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="radio" name="phonePrimary[]"/></td>
        <td>
            <select style="" name="phoneType[]">
                <option value="1">NOT COMPLETED</option>
                <option value="2">MOBILE</option>
                <option value="3">HOME</option>
                <option value="4">WORK</option>
                <option value="5">NEAR BY</option>
            </select>
        </td>
        <td><input type="text" style="width: 200px;" name="phoneNumber[]" /></td>
        <td><input type="text" name="phoneDetails[]" /></td>
        <td><button type="button" id="addButton">+ Add</button></td>
        <td><button type="button" id="deleteButton">- Delete </button></td>
    </tr>
</tbody>

JS:

$("#addButton").on("click", function () {
    alert("Clicked the add! ");
    $('#phoneTable tr:last').after('<tr><td><input type="radio" name="phonePrimary[]"/></td><td><dropdown:DropdownPhoneType entities="${applicationBean.phoneTypes}" name="phoneType[]"/></td><td><input type="text" placeholder="[phone]" class="phone-mask textfield" data-tooltip="Please enter a valid <b>Number</b>" style="width: 200px;" name="phoneNumber[]" /></td><td><input type="text" name="phoneDetails[]" /></td><td><button class="button button-black" type="button" id="addButton">+ Add</button></td><td><button class="button button-black" type="button" id="deleteButton">- Delete </button></td></tr>');
    //$('#phoneTable  tbody > tr:last').clone(true, true).appendTo("#phoneTable");
    $('#phoneTable  tbody > tr:last').prev().find("button[id='addButton']").remove();
});

$("#deleteButton").on("click", function () {
    if($("#phoneTable tbody > tr").length <= 1) {

        return false;
    }
    $('#phoneTable tbody > tr:nth-last-child(2) > td:nth-last-child(2)').append('<button type="button" id="addButton">+ Add</button>');
    $
    $('#phoneTable tbody > tr:last').fadeOut('slow', function () {
        $('#phoneTable tbody > tr:last').remove();
    });
    //alert('Delete Clicked');
});

解决方案

.on() doesn't work like you think it does. If you want the event to be delegated (in old terms, live), you need to bind the event to a parent, and pass it an optional selector parameter. So for any elements that are added dynamically after the hander is initially bound, you need to bind your events like so:

$('body').on('click', '#addButton', function() {
   // code here
});

See: http://api.jquery.com/on/

这篇关于追加jQuery 1.9.1后按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！