询问一些插入的行不会触发点击功能

时间:2015-07-10 08:50:02

标签: javascript jquery

我在这个

中做了一些功能

js fiddle

 var counter = 2;
$("#add").click(function () {

var newTextBoxTr = $(document.createElement('tr'))
     .attr("id", 'pilihan' + counter);  
newTextBoxTr.after().html('<td>pilihan</td><td>text</td><td><a name="add">test</a></td>');
newTextBoxTr.insertAfter("#pilihan"+(counter-1)); 
counter++;
 });

$("a[name='add']").click(function () {
var newTextBoxTr = $(document.createElement('tr'))
     .attr("id", 'pilihan' + counter);  
newTextBoxTr.after().html('<td>pilihan</td><td>text</td><td><a id="add" name="add">test</a></td>');
newTextBoxTr.insertAfter("#pilihan"+(counter-1)); 
counter++;
 });

另一个名称为&#34的标签;添加&#34;或id =&#34;添加&#34;在一些未执行函数的插入行上单击。帮助我

1 个答案:

答案 0 :(得分:0)

您需要使用 event delegation 方法,因为其中一些是动态创建的

var counter = 2;
$('#table').on('click', "#add,a[name='add']", function() {

  var newTextBoxTr = $(document.createElement('tr'))
    .attr("id", 'pilihan' + counter);
  newTextBoxTr.after().html('<td>pilihan</td><td>text</td><td><a name="add">test</a></td>');
  newTextBoxTr.insertAfter("#pilihan" + (counter - 1));
  counter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border=1 width=1000>
    <tr id="pilihan1">
        <td>Pilihan polling</td>
        <td>
            <input type="text" />
        </td>
        <td id="bpilihan1"><a id="add" name="add">test</a>

        </td>
    </tr>
    <tr id="test">
        <td>
<a id="add" name="add">test</a>

        </td>
    </tr>
  </table>