分配点击事件来动态添加按钮

我正在动态地创建一些按钮并为它们分配ID。分配点击事件来动态添加按钮

当有人点击那个按钮我想收集ID并从那里执行一些任务。

这是我的工作正在进行中

$(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); 
}

来源

2010-09-16 Umakanta.Swain

Plz plz修复你的格式 – 2010-09-16 06:48:30

嗨Umakanta.Swain，你能分享你的最终工作代码jsfiddle.Thanks。 – 2013-08-03 17:05:39

只是new-button到要创建的按钮添加一个类名，并在后面加上一个点击处理程序。

所以将这段代码

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

本

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

您可以从onclick事件删除onButtonClick（）和替换

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

与

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

来源

2010-09-16 06:52:40 Marko

谢谢Marko Ivanovski .......... – 2010-09-16 06:57:53

不客气 - 请查看关于如何使用本网站的常见问题，如果我解决了您的问题 - 请勾选此答案左侧的绿色勾号<<<< ----- – Marko 2010-09-16 07:06:47

因为jquery 1.9而不是live，你应该使用“on” – sd1sd1 2013-11-11 19:56:57

我不知道我确切地理解你的问题，但你可以尝试写

var btnId = $(this).attr('id');

，而不是

var btnId = $(this).val();

这会给你的id属性按钮单击，而不是表单元素的值。

我希望这将有助于你

杰罗姆·瓦格纳

来源

2010-09-16 06:53:28

当过有人会点击该按钮我想收集ID和那里，我会在做一些任务.............

尝试从这个管道上卸下onclick属性：

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>";

使其成为：

现在你可以使用jQuery的live方法（因为你的按钮是动态生成的）做当这个按钮被点击这样的伎俩：

$(function(){ 
    $('#btn').live('click', function(){ 
    var btnId = $(this).attr('id'); 
    alert(btnId); 
    }); 
});

注：

要获得id属性，则可以使用attr方法等上面显示例如：在代码$(this).attr('id')不val（其被用于获得一个输入元素的值）等的。

来源

2010-09-16 06:54:07 Sarfraz

他的按钮被命名为＃btn1，＃btn2等等。定位#btn将失败，并且即使所有按钮被调用了＃ BTN，这将是无效的标记和IE只会选择1元素。见上面我的课程解决方案。 – Marko 2010-09-16 07:05:40

如果您正在动态添加按钮，请考虑使用“.live（）”。只要指定的事件发生，它就会沿着树中的html元素进行处理直到它被处理。如果你有很多元素，这也是更高效的，因为事件没有被分配给元素本身。你需要一个类或某事分配给按钮来识别它们，让我们说“dynamicButton”，所以改变这样的：

<input type='button' ID='btn" + item.studId + 
"' value='Delete' onClick='onButtonClick()'/>

这样：

<input type='button' ID='btn" + item.studId + 
"' value='Delete' class="dynamicButton"/>

而且你可以听这个事件代码：

$('input.dynamicButton').live('click', function (event) { 
     alert($(this).attr('id')); 
    });

这一个处理器将被调用每当有带班“dynamicButton”被点击，无论它是如何添加到页面按钮。

来源

2010-09-16 07:07:34

我这样做是用delegate()。就我而言，PHP脚本从MySQL数据库中生成页面的内容。对每个元素添加一个按钮（单击这些按钮可以从数据库中删除相应的元素）。去除是通过另一个PHP脚本这些按钮激活处理，所以一个click事件被附加到每个按钮这样的：

$('.items').delegate('[type="button"]', 'click', remove_item);

其中按钮是items类和remove_item的一部分是用于去除回调。

来源

2013-04-09 14:49:10 TMOTTM

分配点击事件来动态添加按钮

回答

相关问题