Question

我已动态地向表格添加了文本区域和按钮

我想为此动态添加按钮添加点击事件

如何将事件绑定到动态添加的元素...

脚本显示在这里

<script type="text/javascript">
$(document).ready(function(){
    $('#questType').change(function(){
        var id=$('#questType option:selected').val();
        var txt=$('#questType option:selected').text();
        if(id=='singleType'){
            document.getElementById('singleChoise').style.display='inline';
            document.getElementById('multipleChoise').style.display='none'
        }
        else if(id=='multipleType'){
            document.getElementById('multipleChoise').style.display='inline';
            document.getElementById('singleChoise').style.display='none'
        }
    });

     var cnt = 1;
     $(".addRadAnsw").click(function(){
         cnt++;
         $('#tbl1 tr').last().after('<tr><td><input type="radio" name="singAnsw" value="answ'+cnt+'"/></td><td><textarea rows="5" cols="40" placeholder="this is answer'+cnt+'"></textarea><button class="addRadAnsw">ADD</button><button class="remRadAnsw">DELETE</button><br/><hr width="500px;"/></td></tr>'); 
         return false;
     });

    $(".remRadAnsw").click(function(){
     cnt--;
     $('#tbl1 tr:last-child').remove();
     return false;
    });

    var cnt1 = 1;
     $(".addChkAnsw").click(function(){
         cnt1++;
         $('#tbl2 tr').last().after('<tr><td><input type="checkbox" name="multAnsw" value="answ'+cnt1+'"/></td><td><textarea rows="5" cols="40" placeholder="this is answer'+cnt1+'"></textarea><button class="addChkAnsw">ADD</button><button class="remChkAnsw">DELETE</button><br/><hr width="500px;"/></td></tr>'); 
         return false;
     });

    $(".remChkAnsw").click(function(){
     cnt1--;
     $('#tbl2 tr:last-child').remove();
     return false;
    });
});

</script>

Answer 1

jQuery On https://api.jquery.com/on/

$("selector").on("click",function(){
  // action
});

Answer 2

假设您动态添加了addRadAnsw和remRadAnsw按钮，这就是您收听它们的方式。

$('body').on('click', 'button.remRadAnsw', function(e) {
    button = $(this);
    button.text("I've been clicked!");
});

$('body').on('click', 'button.addRadAnsw', function(e) {
    button = $(this);
    button.text("I've been clicked!");
});

Answer 3

$('body').on('click', 'button.addChkAnsw', function(e) {
   //Dynamic added button clicked
   //Remove parent tablerow
   $(this).parent().parent().remove();
});

Answer 4

你也可以尝试这个

$(function(){
    $(document).on('click', 'button.remRadAnsw', function(e) {
        $(this).text("Clicked!");
    });
});

为动态添加的按钮添加事件

4 个答案: