将点击事件分配到动态添加的按钮 [英] Assigning click event to dynamically added buttons

问题描述

我正在动态创建一些按钮并分配ID。

当有人点击该按钮时，我想收集ID，然后从
执行一些任务。

这是我的工作进展

  $ .ready（function（）{
 $（'input：button'）。addClass（btnClass）; 
 fillData（）; 
 $（'＃btnGet'）。 （）{
 fillData（）; 
}）; 
 function fillData（）{
 $ .ajax（{
 type：Post，
 url：../Linq/myService.asmx/getStudent，
 contentType：application / json; charset = utf-8，
 dataType：json，
 success：function （msg）{
 // var nMsg =（typeof msg.d）=='string'？eval（'（'+ msg.d +'）'）：msg.d; 
 var t =< table width = '80％'id ='resTab'>< tr>+ 
< td colspan ='5'style ='text-align：center'> font size ='3'>< strong>您的搜索结果......< / strong>< / font>< / td>< / tr> < tr>< td style ='text-align：left'colspan ='5'>< hr>< / td>< / tr> 
 +< tr>< td style ='text-align：center'>学生ID< / td>< td style ='text-align：center'>学生姓名< / td> ;< td style ='text-align：center'>学生课程< / td>< td style ='text-align：center'> Student USN< / td>< / tr>
 +< tr>< td style ='text-align：left'colspan ='5'>< hr>< br>< / td> ; 
 $ .each（msg.d，function（index，item）{
t = t +< tr>< td style ='text-align：center'>+ item .studId +< / td>< td style ='text-align：center'>+ item.studName +< / td>< td style ='text-align：center' + item.studCourse +< / td>< td style ='text-align：center'>+ item.studUsn +< / td>< td>< input type ='button'ID ='btn'+ item.studId +'value ='Delete'onClick ='onButtonClick（）'/>< / td>< / tr>; 
t = t +< tr& < td style ='text-align：left'colspan ='5'>< hr>< / td>< / tr>; 
}）; 
t = t + < / table> ; 
 $（＃stdData）。html（t）; 
}，
 error：function（msg）{} 
}）; 
} 
 
 
 function onButtonClick（）{
 var btnId = $（this）.val（）; 
 alert（btnId）; 
} 
  

解决方案

只需添加 new-button

 < input type ='button'ID ='btn'
  

使用此

 <输入类型='button'class =new-buttonID ='btn'
  

您可以删除onButtonClick （）from onclick event and replace

  function onButtonClick（）{
 var btnId = $（this）.val （）; 
 alert（btnId）; 
} 
  

  $（new-button）。live（click，function（）{
 var buttonId = $（this）.attr（id）; 
 alert（buttonId）; 
}）; 
  

I am creating some buttons dynamically and assigning them IDs.

When ever someone clicks that button I want to collect the ID and from there perform some task.

Here's my work in progress

$(document).ready(function() {
    $('input:button').addClass("btnClass");
    fillData();
    $('#btnGet').click(function() {
        fillData();
    });
    function fillData() {
        $.ajax({
            type: "Post",
            url: "../Linq/myService.asmx/getStudent",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                //var nMsg = (typeof msg.d) == 'string' ? eval('(' + msg.d + ')') : msg.d;
                var t = "<table width='80%' id='resTab'> <tr>" +
                      "<td colspan='5' style='text-align:center'><font size='3'><strong>Your Search Result......</strong></font></td></tr> <tr><td style='text-align:left' colspan='5'><hr></td></tr> "
                      + " <tr><td style='text-align:center'>Student ID</td><td style='text-align:center'>Student Name</td><td style='text-align:center'>Student Course</td><td style='text-align:center'>Student USN</td></tr>"
                      + " <tr><td style='text-align:left' colspan='5'><hr><br></td></tr> ";
                $.each(msg.d, function(index, item) {
                    t = t + " <tr><td style='text-align:center'>" + item.studId + "</td><td style='text-align:center'>" + item.studName + "</td><td style='text-align:center'>" + item.studCourse + "</td><td style='text-align:center'>" + item.studUsn + "</td><td><input type='button' ID='btn" + item.studId + "' value='Delete' onClick='onButtonClick()'/></td></tr>";
                    t = t + " <tr><td style='text-align:left' colspan='5'><hr></td></tr> ";
                });
                t = t + " </table> ";
                $("#stdData").html(t);
            },
            error: function(msg) { }
        });
    }


function onButtonClick() {
    var btnId = $(this).val();
    alert(btnId);
}

解决方案

Just add a class name of new-button to the buttons you're creating and add a click handler afterwards.

So replace this code

<input type='button' ID='btn"

with this

<input type='button' class="new-button" ID='btn"

You can remove the onButtonClick() from the onclick event and replace

function onButtonClick() {
    var btnId = $(this).val();
    alert(btnId);
}

with

$(".new-button").live("click", function() {
    var buttonId = $(this).attr("id");
    alert(buttonId);
});

这篇关于将点击事件分配到动态添加的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！