поместите функцию jquery в контейнер, который динамически добавляется в ajax-соединение [duplicate]

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

Это означает, что все сообщения электронной почты из неизвестного источника автоматически спам и отвлекаются в папку спама. (Я не позволяю службе электронной почты удалять спам, потому что я хочу всегда просматривать приходы для ложных срабатываний, что довольно легко сделать, если вы быстро просмотрите папку.)

I даже у меня есть электронная почта от себя, отправляюсь в спам-ведро, потому что (1) я обычно не отправляю электронное письмо себе и (2) есть спамеры, которые подделывают мой адрес возврата в спаме, отправленном мне.

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

Если я хочу, чтобы будущие поступления из одного источника, чтобы перейти в мой ящик и не были отвлечены для просмотра спама, я укажу это на свой почтовый клиент. Для тех организаций, которые используют пересылку корреспонденции и уникальные адреса отправителя для одной части почты, это слишком плохо. Они никогда не получают моего одобрения и всегда отображаются в папке со спамом, и если я занят, я никогда не буду смотреть на них.

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

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

1679
задан Vikrant 2 December 2016 в 11:27
поделиться

20 ответов

Начиная с jQuery 1.7, вы должны использовать jQuery.fn.on :

$(staticAncestors).on(eventName, dynamicChild, function() {});

До этого рекомендуется использовать live() :

$(selector).live( eventName, function(){} );

Однако live() устарел в 1.7 в пользу on() и полностью удален в 1.9. Подпись live():

$(selector).live( eventName, function(){} );

... может быть заменена следующей on() сигнатурой:

$(document).on( eventName, selector, function(){} );

Например, если ваша страница динамически создавала элементы с именем класса dosomething, вы привязывали бы событие к родительскому, который уже существует (здесь есть нуль проблемы, вам нужно что-то, что существует для привязки, не привязка к динамическому контенту), это может быть (и самый простой вариант) - document. Хотя иметь в виду document, возможно, не самый эффективный вариант .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

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

$('.buttons').on('click', 'button', function(){
    // do something here
});

применимо к

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>
1799
ответ дан 14 revs, 13 users 28% 16 August 2018 в 11:05
поделиться

Любой родитель, который существует в момент привязки события, и если ваша страница динамически создавала элементы с помощью кнопки имени класса, вы привязывали бы событие к родительскому, который уже существует

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>

7
ответ дан Ankit Kathiriya 16 August 2018 в 11:05
поделиться

Это чистое решение для JavaScript без каких-либо библиотек или плагинов:

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        // .bu clicked
        // Do your thing
    } else if (hasClass(e.target, 'test')) {
        // .test clicked
        // Do your other thing
    }
}, false);

, где hasClass -

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

Live demo

Кредит относится к Dave и Sime Vidas

Использование более современных JS, hasClass может быть реализовано как:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}
160
ответ дан Barmar 16 August 2018 в 11:05
поделиться
  • 1
    [Д0] stackoverflow.com/questions/9106329/… – zloctb 6 January 2016 в 15:57
  • 2
    Вы можете использовать Element.classList вместо разделения – Eugen Konkov 9 August 2016 в 10:07
  • 3
    @EugenKonkov Element.classList не поддерживается в старых браузерах. Например, IE & lt; 9. – Ram Patra 9 August 2016 в 10:59
  • 4
    Хорошая статья о том, как сделать что-то с помощью скрипта ванили вместо jQuery - toddmotto.com/… – Ram Patra 29 June 2017 в 09:25
  • 5
    как насчет пузыри? Что, если событие click произошло на дочернем элементе, который вас интересует? – Andreas Trantidis 6 July 2017 в 13:06

Я искал решение, позволяющее работать $.bind и $.unbind без проблем в динамически добавленных элементах.

Поскольку on () делает трюк для присоединения событий, чтобы создать фальшивую отвязку на тех, к которым я пришел:

const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );
0
ответ дан Evhz 16 August 2018 в 11:05
поделиться
<html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>
-1
ответ дан Fakhrul Hasan 16 August 2018 в 11:05
поделиться
  • 1
    Хотя этот фрагмент кода может решить проблему, он не объясняет, почему и как он отвечает на вопрос. Пожалуйста, включите объяснение для своего кода, так как это действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. – Palec 30 September 2017 в 11:07

Используйте метод .on() jQuery http://api.jquery.com/on/ для присоединения обработчиков событий к элементу live.

Также с версии 1.9 .live() удаляется.

3
ответ дан Kalpesh Patel 16 August 2018 в 11:05
поделиться

Вот почему динамически созданные элементы не реагируют на клики & nbsp;:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

В качестве обходного пути вы должны прослушивать все клики и проверять исходный элемент & nbsp;:

var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
  if ($(ev.target).is("button")) {
    console.log(ev.target);
  }
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Это называется «Event Delegation». Хорошие новости, это встроенная функция в jQuery: -)

var i = 11;
var body = $("body");
body.on("click", "button", function () {
  var letter = (i++).toString(36).toUpperCase();
  body.append($("<button>" + letter + "</button>"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

7
ответ дан leaf 16 August 2018 в 11:05
поделиться

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

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

Например:

$(document).on("click", $(selector), function() {
    // Your code here
});
15
ответ дан Matthew Cliatt 16 August 2018 в 11:05
поделиться
  • 1
    селектор не должен быть заключен в $, поэтому правильным форматом будет $ (document) .on («click & quot;», «селектор», function () {// здесь ваш код}); – autopilot 9 April 2018 в 04:21
  • 2
    Также бессмысленно обертывать объект jQuery вокруг переменной selector, когда он должен содержать строку или элемент Element, которые вы можете просто передать непосредственно этому аргументу в on() – Rory McCrossan 20 June 2018 в 14:57

вы можете использовать

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

или

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

, эти два метода эквивалентны, но имеют другой порядок параметров.

см .: Событие делегата jQuery

9
ответ дан Mensur Grišević 16 August 2018 в 11:05
поделиться
  • 1
    delegate() теперь устарел. Не используйте его. – Rory McCrossan 20 June 2018 в 14:58

Вы можете присоединить событие к элементу при динамическом создании с помощью jQuery(html, attributes) .

Начиная с jQuery 1.8, любой метод экземпляра jQuery (метод jQuery.fn ) можно использовать как свойство объекта, переданного второму параметру:

function handleDynamicElementEvent(event) {
  console.log(event.type, this.value)
}
// create and attach event to dynamic element
jQuery("<select>", {
    html: $.map(Array(3), function(_, index) {
      return new Option(index, index)
    }),
    on: {
      change: handleDynamicElementEvent
    }
  })
  .appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

10
ответ дан Milan Chheda 16 August 2018 в 11:05
поделиться

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

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

Примечание:

Элемент-оболочка-оболочка может быть любым ex. документа, тела или вашей обертки. Упаковщик должен уже существовать.

0
ответ дан Must keem 16 August 2018 в 11:05
поделиться

Обратите внимание на класс «MAIN», в который помещается элемент, например

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

. В приведенном выше сценарии объект MAIN, который будет наблюдать jQuery, является «контейнером».

Тогда вы в основном будете иметь имена элементов в контейнере, такие как ul, li и select:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });
58
ответ дан Peter Mortensen 16 August 2018 в 11:05
поделиться
  • 1
    Это сообщение действительно помогло мне понять проблему, с которой я загружаю ту же форму и получаю 1,2,4,8,16 .... Вместо использования .live () я просто использовал .bind () в моем обратном вызове .load (). Задача решена. Благодаря! – Thomas McCabe 24 August 2011 в 10:24
  • 2
    жить устарело – gorgi93 13 June 2013 в 10:55
  • 3
    Yeap, и они не говорят (document.body), его говорит предок, который может быть почти что угодно – MadeInDreams 23 January 2016 в 17:29
  • 4
    Ваш код содержит 1 ошибку: myElement.append('body'); должен быть myElement.appendTo('body');. С другой стороны, если нет необходимости в дальнейшем использовании переменной myElement, это проще и короче: $('body').append($('<button/>', { text: 'Go to Google!' }).bind( 'click', goToGoogle)); – ddlab 11 May 2017 в 19:58

Более гибкое решение для создания элементов и связывания событий ( source )

// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });

// binding the event
 $btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
    console.log('clicked');
 });

// append dynamic button to the dynamic container
$div.append($btn);

// add the dynamically created element(s) to a static element
$("#box").append($div);

Примечание. Это создаст экземпляр обработчика события для каждого элемента (может повлиять на производительность при использовании в петлях)

1
ответ дан Prasad De Silva 16 August 2018 в 11:05
поделиться

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

$(document).on( 'click', '.click-activity', function () { ... });
5
ответ дан Rohit Suthar 16 August 2018 в 11:05
поделиться

Я предпочитаю, чтобы прослушиватели событий были развернуты модульной функцией, а не сценарием прослушивателя событий уровня document. Итак, мне нравится ниже. Обратите внимание: вы не можете переадресовать элемент с одним и тем же прослушивателем событий, поэтому не беспокойтесь о прикреплении слушателя более одного раза - только один палец.

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}

0
ответ дан Ron Royston 16 August 2018 в 11:05
поделиться

Привязать событие к родительскому объекту, который уже существует:

$(document).on("click", "selector", function() {
    // Your code here
});
1
ответ дан truongnm 16 August 2018 в 11:05
поделиться

В документации jQuery.fn.on есть хорошее объяснение.

Короче:

Обработчики событий привязаны только к выбранные в данный момент элементы; они должны существовать на странице, когда ваш код делает вызов .on().

Таким образом, в следующем примере #dataTable tbody tr должен существовать до генерации кода.

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

Если на страницу вводится новый HTML-код, предпочтительнее использовать делегированные события для присоединения обработчика событий, как описано ниже.

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

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда необходимо контролировать многие элементы. В таблице данных с 1000 строками в tbody первый пример кода прикрепляет обработчик к 1000 элементам.

Подход с делегированными событиями (второй пример кода) прикрепляет обработчик события только к одному элементу , tbody, и событию нужно только выровнять один уровень (от щелчка tr до tbody).

Примечание. Делегированные события не работают для SVG .

301
ответ дан user664833 16 August 2018 в 11:05
поделиться
  • 1
    это был бы более приемлемый ответ, потому что быстрее было бы делегировать из конкретной таблицы, а не полностью из документа (область поиска была бы намного меньше) – msanjay 9 May 2014 в 19:14
  • 2
    @msanjay: Хотя предпочтение от поиска ближе к элементам является предпочтительным, разница в поиске / скорости на практике очень незначительна. Вам нужно будет щелкнуть 50 000 раз в секунду, чтобы заметить что-нибудь :) – Gone Coding 12 November 2014 в 13:06
  • 3
    Можно ли применить этот подход к обработке флажков в строке, изменив tr на соответствующий селектор, например 'input[type=checkbox]', и это будет автоматически обрабатываться для вновь вставленных строк? – JoeBrockhaus 25 November 2014 в 18:26

Попробуйте использовать .live() вместо .bind(); .live() свяжет .hover с вашим флажком после выполнения запроса Ajax.

37
ответ дан Willi Mentzel 16 August 2018 в 11:05
поделиться
  • 1
    Метод live() устарел в версии 1.7 в пользу on и удален в версии 1.9. – chridam 17 June 2014 в 13:30
58
ответ дан Peter Mortensen 6 September 2018 в 05:26
поделиться
60
ответ дан Peter Mortensen 29 October 2018 в 11:59
поделиться
Другие вопросы по тегам:

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