Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Параметр в функцию - элемент DOM (https://javascript.ru/forum/dom-window/63269-parametr-v-funkciyu-ehlement-dom.html)

Frozen Coyote 27.05.2016 16:34

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

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

makeHTML($(myEl))


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

function makeHTML(el)
{
$("body").append("<button onclick=\"start(el)\">Моя кнопка</button>") // неправильный вариант и понятно почему
}

Decode 27.05.2016 17:51

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

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

ИМХО, лучше сделать так: http://codepen.io/anon/pen/vKYEjb?editors=1010

DynkanMaclaud 28.05.2016 02:11

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!

Frozen Coyote 30.05.2016 11:46

Цитата:

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

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

ИМХО, лучше сделать так: http://codepen.io/anon/pen/vKYEjb?editors=1010

Спасибо. Ваше решение я вначале и сам планировал, но мне стало интересно - можно ли оформить передачу не самого объекта DOM, а к примеру что то вроде ссылки на него? Ибо если кнопка одна, как я привел в примере - это одно, а если допустим эта кнопка - "удалить строку" в таблице, где этих строк будет 100500 - не очень по моему красиво каждой динамически создавать обработчик. Как думаете?

DynkanMaclaud 30.05.2016 13:24

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'));

destus 30.05.2016 15:04

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>

DynkanMaclaud 30.05.2016 15:52

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(); //

destus 30.05.2016 16:54

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


Часовой пояс GMT +3, время: 05:59.