JQuery - динамическая кнопка создания и прикрепление обработчика событий

Я хотел бы динамически добавлять элемент управления кнопки в таблицу с помощью jQuery и присоединять обработчик события клика. Я пробовал следующее, без успеха:

$("#myButton").click(function () {
    var test = $('<button>Test</button>').click(function () {
        alert('hi');
    });

    $("#nodeAttributeHeader").attr('style', 'display: table-row;');
    $("#addNodeTable tr:last").before('<tr><td>' + test.html() + '</td></tr>');
});

Вышеприведенный код успешно добавляет новую строку, но не позволяет правильно добавить кнопку. Как я могу выполнить это с помощью jQuery?

Ответы

Ответ 1

Вызов .html() сериализует элемент в строку, поэтому все обработчики событий и другие связанные данные теряются. Вот как я это сделаю:

$("#myButton").click(function ()
{
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
    });

    var parent = $('<tr><td></td></tr>').children().append(test).end();

    $("#addNodeTable tr:last").before(parent);
});

Или

$("#myButton").click(function ()
{    
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
    }).wrap('<tr><td></td></tr>').closest('tr');

    $("#addNodeTable tr:last").before(test);
});

Если вам не нравится передавать карту свойств в $(), вы можете вместо этого использовать

$('<button/>')
    .text('Test')
    .click(function () { alert('hi'); });

// or

$('<button>Test</button>').click(function () { alert('hi'); });

Ответ 2

Ваша проблема заключается в том, что вы конвертируете кнопку в фрагмент HTML, когда добавляете ее в таблицу, но этот фрагмент не является тем же объектом, что и тот, у которого на нем есть обработчик кликов.

$("#myButton").click(function () {
    var test = $('<button>Test</button>').click(function () {
        alert('hi');
    });

    $("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed

    var tr = $('<tr>').insertBefore('#addNodeTable tr:last');
    var td = $('<td>').append(test).appendTo(tr);
});

Ответ 3

Быстрое исправление. Создать целую структуру tr > td > ; затем найдите кнопку внутри; приложить к нему событие; концевую фильтрацию цепи и вставить и вставить ее в дом.

$("#myButton").click(function () {
    var test = $('<tr><td><button>Test</button></td></tr>').find('button').click(function () {
        alert('hi');
    }).end();

    $("#nodeAttributeHeader").attr('style', 'display: table-row;');
    $("#addNodeTable tr:last").before(test);
});

Ответ 4

Вы можете использовать onclick внутри кнопки, чтобы гарантировать сохранение события, или присоединить обработчик нажатия кнопки, наведя кнопку после ее установки. Вызов test.html() не будет сериализовать событие.

Ответ 5

Вы просто добавили строку html. Не тот элемент, который вы создали с помощью прослушивателя событий щелчка.

Попробуйте следующее:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
    <table id="addNodeTable">
        <tr>
            <td>
                Row 1
            </td>
        </tr>
        <tr >
            <td>
                Row 2
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        var test = $('<button>Test</button>').click(function () {
            alert('hi');
        });
        $("#addNodeTable tr:last").append('<tr><td></td></tr>').find("td:last").append(test);

    });
</script>