JQuery тумблеры динамически создаваемые элементы

Question

У меня есть что-то вроде этого, но он не работает:

<!-- ... code .. --> 

var id = 0;   

data.forEach(function(item, i) { 
     id = id+1; 

$(".button-" + id).click(function() { 
$(".button-" + id).toggle(); 

}); 

<!-- ... code .. --> 

Что я хочу: Есть некоторые DIVs кнопки-1, кнопка-2, как ... и скоро. Я сделал переключатель, и я хотел автоматизировать его с помощью этого цикла, потому что контент динамически генерируется. Но это кажется неправильным ... В этом цикле это не работает.

Итак, как сделать переключатели динамически для кнопки-1, кнопки-2, ... ??

Это просто об этом, что кажется неправильным:

$(".button-" + id).click(function() { 
$(".button-" + id).toggle(); 

EDIT

Ну, может быть, мой вопрос был немного грязный Спасибо всем до сих пор за ваши ответы, я на самом деле ценить это! Но для меня не было правильного ответа ... Итак, снова и сейчас более конкретный:

У меня есть несколько кнопок с значками материалов, которые должны менять свое состояние при нажатии.

<a href="" class="likebutton-1"><i class="material-icons">favorite</i></a> 
<a href="" class="likebutton-1" style="display:none;"><i class="material-icons">favorite_border</i></a> 

Содержание HTML генерируется динамически, так что есть likebutton-1, likebutton-2 ...

Тогда есть другой DIV, который показывает количество подобных:

<div class="likes-1">99 likes</div> 
<div class="likes-1" style="display:none;">100 likes</div> 

DIV как внутри внешнего контейнера.

А вот мой JQuery код для этого:

$(".likebutton-1").click(function() { 
$(".likebutton-1").toggle(); 
$(".likes-1").toggle(); 
});  

Ну, что код работает для меня. Значок переключается с любимого на favorite_border и нравится переключать с 99 до 100 ... (Это просто демо-приложение, поэтому нет необходимости действительно считать понравившиеся)

Но я хочу также генерировать этот код jQuery динамически , и это то, что не работает ... пока я должен установить вручную переключатели для likebutton-1, напримерbutton-2 ...

Answer 1

Основываясь на своем последнем обновлении я хотел бы предложить некоторые структурные изменения в вашей HTML-разметки.

Вместо использования:

<a href="" class="likebutton-1"><i class="material-icons">favorite</i></a> 
<a href="" class="likebutton-1" style="display:none;"><i class="material-icons">favorite_border</i></a> 

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

Делают это так:

<a href="#" class="likebutton"><i class="material-icons icon-fav">favorite</i></a> 

Я добавил класс icon-fav к вашему элементу, чтобы получить доступ к нему легко заранее.

Теперь мы делаем то же самое для вашего раздела и улучшаем структуру кода. Отделите значение-count (так что число) от текста. Таким образом, мы можем легко увеличить или уменьшить это число.

<div class="likes"><span class="likes-count">99</span> likes</div> 

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

<div class="parent-container"> 
    <a href="#" class="likebutton"><i class="material-icons icon-fav">favorite</i></a> 
    <div class="likes"><span class="likes-count">99</span> likes</div> 
</div> 

Теперь мы заботимся обо всем остальном - на JavaScript.

Нам необходимо пройти обход дерева из-за удалённого суффикса -x ваших классов - иначе мы бы сразу изменили все ваши элементы, щелкнув один из них. Вы можете найти более подробную информацию о jQuery Tree Traversal здесь.

$(".likebutton").click(function() { 
    var $parent = $(this).closest(".parent-container"); 
    var likes = parseInt($parent.find(".likes-count").text()); 

    if($parent.find(".icon-fav").text() == "favorite") { 
     $parent.find(".icon-fav").text("favorite_border"); 
     $parent.find(".likes-count").text(++likes); 
    } 
    else { 
     $parent.find(".icon-fav").text("favorite"); 
     $parent.find(".likes-count").text(--likes); 
    } 
}); 

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

Адрес working jsfiddle! Попробуйте.

Answer 2

Сделайте снимок! :)

$("[class*='button-']").click(function(){ 
    $(this).toggle(); 
}); 

Answer 3

вы должны использовать закрытие здесь,

var id = 0; 

data.forEach(function(item, i) { 
     id = id+1; 
     var bindEvents = function theOutterFunction() {  
     return function() { 
     $(".button-" + id).click(function() { 
     $(".button-" + id).toggle(); 
     } 
     }(); 
     bindEvents(); 
}); 

Answer 4

Я думаю, что это то, что вы имеете в виду: D

https://jsfiddle.net/1eo4b33m/1/

$("[class*=button-]").click(function(){ 
    $(this).toggle() 
}) 

Answer 5

У вас есть хорошие ответы. но похоже, что вам не хватает того, насколько это просто. То, что вам нужно использовать, - это метод jQuery's .on. Вы можете посмотреть на это SO Q&A для получения дополнительной информации о настройке динамических событий.

Однако, в общем, что это означает: «назначение событий для динамических элементов статическому родителю». Читайте здесь, чтобы узнать больше о "What is dynamic and static". Короче говоря, динамические средства, созданные после загрузки страницы.

Таким образом, вы можете использовать answer от Jamie Phan, вам просто нужно понять, как его реализовать.

Все, что вам действительно нужно, это «статический родитель» ». Это элемент, который уже существует в HTML при загрузке страницы. Довольно часто я лично использую объект DOM, однако лучше всего иметь близкого родителя с идентификатором. Например, если ваш HTML выглядел так:

<div> 
    <h1>Dynamic buttons added below</h1> 
    <ul id="divDyno"><!-- Buttons will be added here --></ul> 
</div> 

Тогда ваш статический родитель будет <div id="divDyno"..., которые могут быть выбраны с помощью строки '#divDyno'. Таким образом, ваш код будет выглядеть так:

$('#ulDyno').on('click', '[class*=button-]', function(e) { 
    $(this).toggle(); 
}) 

---

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

Модифицированный просто переключать классы (ака изменение состояния) кнопок

/** This will be the event fired when clicking on a "dynamically" created button **/ 
 
function button_click_event() { 
 
\t // \t only need use "this", no need for ID. 
 
\t // \t 'this' is the button html element itself 
 
\t $(this).toggleClass('black white'); 
 
} 
 

 
/** This event will dynamically create buttons **/ 
 
function create_button() { 
 
\t \t // first I get the length of how many buttons exist, 
 
\t \t // simply to add to the button text 
 
\t var len = $('ul li').length, 
 
\t \t // \t then I create a <li> to append to the <ul> 
 
\t \t li = $('<li />').appendTo('ul'), 
 
\t \t // \t then, of course, I create the <button> and add it to the <li> 
 
\t \t btn = $('<button />').text('Button '+len).addClass('button-'+len).appendTo(li); 
 
\t // \t now we'll give the button a class for color 
 
\t btn.addClass(len%2 ? 'black': 'white') 
 
} 
 

 
/** This will simply show all "toggled" buttons **/ 
 
function show_buttons() { 
 
\t $('ul button').show(); 
 
} 
 
$(function() { 
 
\t // \t As per the previously mentioned example 
 
\t // \t In jQuery, you can set events for a dynamic element by using a static parent. 
 
\t $('#ulDyno').on('click', '[class*=button-]', button_click_event) 
 
\t 
 
\t // \t In the following case, I'll simply use the DOM for brevity, 
 
\t // \t \t but it's still best to use a "static" element with an ID 
 
\t // \t This event is simply for the "Add" button. To "dynamically" create buttons. 
 
\t $(document).on('click', '#btnAdd', create_button)// notice i didn't close with a ";" 
 
\t \t // \t With no close, the return is "$(document)", So I can write more code attached to it. 
 
\t \t // \t This event will show any "toggled" buttons 
 
\t \t .on('click', '#btnShow', show_buttons); 
 
});

html, body { font-size: 20px; width: 100%; } 
 
html, body, table { height: 100%; margin: 0 auto; padding: 0; text-align: center; } 
 
div { left: 1em; position: fixed; top: 1em; } 
 
ul { margin: 0 auto; padding: 0; } 
 
li { list-style: none; margin: .5em auto; padding: 0; } 
 
button { padding: .5em .8em; } 
 
.black { background-color: #000; color: #fff } 
 
.white { background-color: #fff; color: #000 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div><button id="btnAdd">Add Buttons</button><button id="btnShow">Show All Buttons</button></div> 
 
<table> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t <br /> 
 
\t \t \t <ul id="ulDyno"></ul> 
 
\t \t </td> 
 
\t </tr> 
 
</table>