jQuery - динамически создать кнопку и прикрепить обработчик событий

ProgramBox

jQuery — динамически создать кнопку и прикрепить обработчик событий

Post author:admin
Запись опубликована:20 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

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

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

1. Черт возьми, мне не нравится, как вы сделали click дополнение к созданию элемента — я думаю, .click() это более интуитивно понятно и лучше документировано.

2. В любом случае работает просто отлично. Я также могу показать, как это сделать с помощью цепочки.

3. теперь, когда вы добавили дополнительные атрибуты, это имеет больше смысла

Ответ №2:

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

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

1. в .end() этой цепочке нет необходимости.

2. Это. find(‘button’) вернет только элемент button, но вам нужна целая структура tr> td> button 🙂

3. а — понятно — чтобы убедиться, что возвращаемое значение является <tr> самим собой? Полезно 🙂

4. @Matt Ball: Зачем вообще нужен терминал end() ?

5. О, неважно. Это бесполезно только в конце, если вас не волнует возвращаемое значение.

Ответ №3:

Ваша проблема в том, что вы преобразуете кнопку во фрагмент 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);
});

Ответ №4:

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

Ответ №5:

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

Попробуйте это:

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