jQuery append - html wrote не вызывает другие события

Question

jQuery append - html wrote не вызывает другие события

0

Может быть, я должен быть более конкретным. У меня есть функция javascript, вызванная отсюда:

<input id="Text1" type="text" onkeyup="Trova('Text1');" />

Функция, поиск в массиве и с помощью jquery рисует новые строки в таблицу (ID #tabdest):

$("#tabdest").append('<tr><td class="preview" nome="' + nomi[i] + '" >' + nomi[i] + '</td></tr>');

До сих пор все в порядке. В мой.js файл у меня есть эта функция, которая будет выполнена:

$(document).ready(function () {
    $(".preview").mousemove(function (event) {
        ...

Эта функция работает правильно, если я пишу таблицу вручную, но не делает, если jQuery пишет ее.

Прошу прощения за мой страшный английский, надеюсь найти помощь. Спасибо в любом случае.

Silvestro Magliola 27 окт. 2013, в 12:47

Источник

Теги:

javascript

jquery

3 ответа

1

Использовать .on()

Поскольку элементы добавляются динамически, вы не можете напрямую связывать события с ними. Поэтому вам нужно использовать Event Delegation.

$("#tabdest").on('mousemove','.preview',function(event){ ...  });

Синтаксис

$( elements ).on( events, selector, data, handler );

Tushar Gupta 27 окт. 2013, в 08:40

0

Поскольку ячейка preview добавляется динамически, вам необходимо использовать делегирование событий для регистрации обработчика событий:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#tabdest').on('mousemove', '.preview', function(event) {        
    alert('testlink'); 
    //....
});

Это добавит ваше событие в любую ячейку таблицы с preview класса в #tabdest таблицы #tabdest, что уменьшит объем проверки всего дерева элементов document и повышения эффективности.

palaѕн 27 окт. 2013, в 08:42

Ещё вопросы

RobH · Accepted Answer · 2013-10-27T08-39-00.000Z

Хотя другие ответы правильно определили, что вы должны использовать делегирование делегирования (используя jQuery on функции), я хотел немного рассказать о том, как работает ваш код.

$(document).ready(function () {
    $(".preview").mousemove(function (event) {
        ...

Переводится на следующие слова: Когда документ готов к поиску всех элементов с классом "Предварительный просмотр" и добавляет обработчик событий к этим элементам для события перемещения мыши. jQuery не делает магию.

$('.preview')...

в основном делает

document.getElementsByClassName('preview')

Это не делает никакого сопоставления или привязки к DOM. Это означает, что когда вы добавляете новый элемент с классом "Предварительный просмотр", код, добавленный обработчикам событий, должен снова запускаться, чтобы выбрать этот новый элемент вверх.

С помощью:

$("#tabdest").on('mousemove', '.preview', function(e) { });

Привязывает обработчик события к элементу "tabdest" (который не изменяется), и когда пользователь нажимает на дочерний элемент этого элемента (один из ваших вновь созданных элементов), событие создает пузырьки DOM и запускает эту функцию.