分配點擊事件來動態添加按鈕

我正在動態地創建一些按鈕併爲它們分配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

分配點擊事件來動態添加按鈕

回答

相關問題