Вопрос по jquery, events, dom-manipulation – jQuery - не можете связать события с динамическими элементами?

5

мы пришли поддержать javascript, который загружает некоторые данные JSON с сервера, создает новую строку таблицы (например,$('

Можете ли вы привести пример того, как этоконтекстно-зависимый '? VIDesignz
@ JakubLéЭтоЭто не правильный способ привязать щелчок к вновь созданным элементам. Смотрите мой пересмотренный ответ и скрипку .. VIDesignz
Вы правильно используете on ()? VIDesignz
Кроме того, должна ли функция в пределах щелчка влиять на другой динамически генерируемый элемент? Пожалуйста, изложите свой вопрос. VIDesignz

Ваш Ответ

6   ответов
0

Вы можете использовать делегирование событий так.

$('body').on('click','.foo',function(){
    alert('foo');
});

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

К сожалению, мне нужно привязать обратный вызов к каждой ссылке отдельно, поскольку обратный вызов зависит от переменных внутри цикла, который его создает. Но я'я думал, чтоs ОК, поскольку новая ссылка создается (и добавляется) каждый раз в течение итерации. Jakub Lédl
В этом примере событие привязывается к динамически сгенерированному элементу, а не к документу в начале, поэтому с регулярной привязкой все должно быть в порядке:$('a').on('click', function(){ Diego
3
You have various options. You can bind to the element or to the document. 

СВЯЗЬ С ДОКУМЕНТОМ:

 $(document).on("click", "a.foo", function(event){
//do stuff here 
 });

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

СВЯЗЬ С ЭЛЕМЕНТОМ:

$("a.foo").on("click", function(event){
//do stuff here
  });

При привязке к элементу функция привязывается ко всем ранее существующим элементамТОЛЬКО, Поэтому убедитесь, что вы делаете это в конце загрузки документа или в конце вашей функции.

Я бы рекомендовал всегда привязывать к документу!

0

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

var a = $('<a class="foo" href="#">ASD</a>');
$("body").html(a);
a.click(function() {
    alert('a');
    return false;
});
0

Две вещи приходят мне на ум:

Ссылка не имеет текста, поэтому вы не нажимаете на нее.Ты недаже не добавляя его в дом.

Вот есть скрипка, которая работает с кодом, очень похожим на ваш.

var a = $('<a class="foo" href="#">ASD</a>');

a.click(function() {
    alert('a');
});

a.appendTo($("body"));
@ JakubLéЭто прокрутка к вершине, потому что у вас есть «#» в отсчете Как вы думаете, что это будет делать? VIDesignz
@ JakubLédl Итак, привязка клика работает, но не функция внутри клика? VIDesignz
Спасибо за предложения, но 1) страница прокручивается вверх после щелчка по ссылке и 2) я проверял несколько раз и, к сожалению, я 'Я уверен, что знаю. Jakub Lédl
Да, конечно. Я добавил это, чтобы увидеть, что это было на самом деледелать что-либо, Обратный вызов клика, конечно, содержитevent.preventDefault() (или жеreturn falseнеужелиэто действительно важно, поскольку обратный вызов не вызывается в первую очередь). Jakub Lédl
0

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

$('a.foo').on('click',function(event){
 //your code goes here
});
6

РЕДАКТИРОВАНИЕ

.On () должен быть настроен так, чтобы работать с динамически создаваемыми элементами. Кроме того, убедитесь, что вы используете Jquery версии 1.8 (последняя версия)

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

Вот рабочаяFIDDLE

var a = $('<a class="foo" href="#">ASD</a>');

a.appendTo($("body"));

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).after('<br><a class="foo" href="#">ASD</a>');
});
В этом примере событие привязывается к динамически сгенерированному элементу, а не к документу в начале, поэтому с регулярной привязкой все должно быть в порядке: I '$('a').on('click', function(){ Diego
Я не уверен, что это так ... надеюсь, ОП может уточнить. В любом случае, без вреда при обучении себя правильно связывать события! VIDesignz
Я старалсяon() больше из отчаяния, я полагаю, что регулярное связываниедолжен работа, но спасибо. Jakub Lédl
@ JakubLédl Нет причин, по которым это не сработало бы ... в другом месте вашего сценария должна быть проблема. VIDesignz

Похожие вопросы