Назначение события нажатия динамически добавленным кнопкам - PullRequest
Новая
       3

Назначение события нажатия динамически добавленным кнопкам

3 голосов
/ 16 сентября 2010

Я создаю несколько кнопок динамически и присваиваю им идентификаторы.

Когда кто-то нажимает на эту кнопку, я хочу собрать идентификатор и оттуда выполнить какое-то задание.

Вот моя работа в процессе

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

Ответы [ 5 ]

14 голосов
/ 16 сентября 2010

Просто добавьте имя класса new-button к создаваемым кнопкам и добавьте обработчик кликов.

Так замените этот код 

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

с этим 

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

Вы можете удалить onButtonClick () из события onclick и заменить 

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

с 

$(".new-button").live("click", function() {
    var buttonId = $(this).attr("id");
    alert(buttonId);
});
1 голос
/ 16 сентября 2010

Если вы динамически добавляете кнопки, подумайте об использовании ".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, независимо от того, как она добавляется на страницу.

1 голос
/ 16 сентября 2010

Я не уверен, что точно понимаю вашу проблему, но вы можете попробовать написать 

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

вместо 

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

, это даст вам атрибут id нажатой кнопки ине значение элемента формы.

Надеюсь, это поможет вам

Джером Вагнер

0 голосов
/ 09 апреля 2013

Я сделал это, используя delegate().В моем случае скрипт PHP генерирует содержимое страницы из базы данных MySQL.К каждому элементу добавляется кнопка (нажатие на эти кнопки может удалить соответствующий элемент из базы данных).Удаление выполняется другим PHP-скриптом, который активируют эти кнопки, поэтому к каждой кнопке прикрепляется событие click, например: 

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

, где кнопки являются частью класса items и remove_item является обратным вызовом для удаления.

0 голосов
/ 16 сентября 2010

Когда кто-нибудь нажимает на эту кнопку, я хочу собрать 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>";

Делая это: 

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'/></td></tr>";

И теперь вы можете использовать jQuery's live метод (так как ваша кнопка генерируется динамически), чтобы сделать трюк при нажатии этой кнопки следующим образом: 

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

Примечание:

Чтобы получить *Атрибут 1024 *, вы можете использовать метод attr, как показано выше, например: $(this).attr('id'), а не val (который используется для получения значения элемента ввода), как ваш в вашем коде.

...