Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2016, 16:34
Интересующийся
Отправить личное сообщение для Frozen Coyote Посмотреть профиль Найти все сообщения от Frozen Coyote
 
Регистрация: 16.02.2011
Сообщений: 14

Параметр в функцию - элемент DOM
Добрый день, подскажите пожалуйста, как реализовать штуку такую:

Есть функция js получающая в себя единственный параметр - элемент

makeHTML($(myEl))


сама функция создает допустим кнопку и добавляет ее в DOM. У кнопки есть параметр onclick который вызывает функцию start, которая должна получить в себя этот вот самый myEl. Подскажите плиз, как этот el внутри makeHTML передать в start? как мне преобразовать пришедший этот el и во что?

function makeHTML(el)
{
$("body").append("<button onclick=\"start(el)\">Моя кнопка</button>") // неправильный вариант и понятно почему
}
Ответить с цитированием
  #2 (permalink)  
Старый 27.05.2016, 17:51
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Frozen Coyote, даже если сделать так:
$("body").append('<button onclick="start(' + el + ')">Моя кнопка</button>');

Элемент будет преобразован к строке.

ИМХО, лучше сделать так: http://codepen.io/anon/pen/vKYEjb?editors=1010
Ответить с цитированием
  #3 (permalink)  
Старый 28.05.2016, 02:11
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

Frozen Coyote,
function makeHTML(el){
  
  $('body').append('<button onclick="start(elem)">Моя кнопка</button>');
  return el[0];
  
}
function start(el) {

	alert(el.innerHTML);

}
var elem = makeHTML( $('div'));


Вставлять код в конец body!
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2016, 11:46
Интересующийся
Отправить личное сообщение для Frozen Coyote Посмотреть профиль Найти все сообщения от Frozen Coyote
 
Регистрация: 16.02.2011
Сообщений: 14

Сообщение от Decode Посмотреть сообщение
Frozen Coyote, даже если сделать так:
$("body").append('<button onclick="start(' + el + ')">Моя кнопка</button>');

Элемент будет преобразован к строке.

ИМХО, лучше сделать так: http://codepen.io/anon/pen/vKYEjb?editors=1010
Спасибо. Ваше решение я вначале и сам планировал, но мне стало интересно - можно ли оформить передачу не самого объекта DOM, а к примеру что то вроде ссылки на него? Ибо если кнопка одна, как я привел в примере - это одно, а если допустим эта кнопка - "удалить строку" в таблице, где этих строк будет 100500 - не очень по моему красиво каждой динамически создавать обработчик. Как думаете?
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2016, 13:24
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

Frozen Coyote,
function makeHTML(el) {
  var mas=[];
  var i=0;
  for (;i < el.length; i++) {
  	$('body').append('<button onclick="start(elem, '+i+')">Моя кнопка</button>');
    mas.push(el[i]);
  };
  return mas;
};
function start(el,index) {
	alert(el[index].innerHTML);
};
var elem = makeHTML( $('div'));
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2016, 15:04
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

DynkanMaclaud,
Зачем DOM элемент в массиве хранить? А если со страницы удалить элемент? Я так понимаю, что утечка памяти - не единственное следствие. Обработчики остаются в памяти и продолжают работать.
<div>123</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script>
function makeHTML(el) {
    var mas=[];
    var i=0;
    for (;i < el.length; i++) {
        $('body').append('<button onclick="start(elem, '+i+')">Моя кнопка</button>');
        mas.push(el[i]);
    };
    return mas;
};
function start(el,index) {
    alert(el[index].innerHTML);
};
var elem = makeHTML( $('div'));

$('div').remove(); //123

</script>
Ответить с цитированием
  #7 (permalink)  
Старый 30.05.2016, 15:52
Аватар для DynkanMaclaud
Профессор
Отправить личное сообщение для DynkanMaclaud Посмотреть профиль Найти все сообщения от DynkanMaclaud
 
Регистрация: 08.08.2014
Сообщений: 261

destus,
Сообщение от Frozen Coyote
Подскажите плиз, как этот el внутри makeHTML передать в start?
Попросили передать el я и передал...
var elems = 'div';
function makeHTML(el) {
  var mas=[];
  var i=0;
  for (;i < el.length; i++) {
   $('body').append('<button onclick="start(elem, '+i+')">Моя кнопка</button>');
   mas.push(el[i]);
  };
  return mas;
};
function start(el,index) {
  (checkEl()) ? alert(el[index].innerHTML) : delete el[index];
  function checkEl() {
  	if (document.querySelectorAll(elems)[index]) return true
    else return false;
  };  
};
var elem = makeHTML( $(elems));
$('div').remove(); //

Последний раз редактировалось DynkanMaclaud, 30.05.2016 в 16:11.
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2016, 16:54
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

DynkanMaclaud,
WeakMap еще можно использовать как вторичное хранилище. Без дополнительных танцев с бубном
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
новый элемент не добавляется в DOM kuchuluk Элементы интерфейса 5 30.05.2014 22:11
повесить функцию на элемент Mawr AJAX и COMET 3 17.05.2014 23:18
Является ли объект DOM объектом Hapson Events/DOM/Window 41 26.03.2014 00:11
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 16:19
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11