как передать элемент во встроенном событии onclick в динамически создаваемой строке

Question

У меня есть функция, которая создает шаблон кнопки для панели инструментов Kendo Grid на основе полученного параметра.Я хочу передать одно из свойств внутри параметра с именем element (это элемент jquery) через функцию onclick, чтобы я мог получить доступ к этому элементу в функции fnAdd(element).

 function(parameter)
 {
     var template="<button onclick='fnAdd("+param.element+")'>Add</button>";
     $('#grid').kendoGrid({
         toolbar: template
     });
 }

В настоящее время функция onclick не работает.Я пытаюсь использовать JSON.stringify для параметра и пропустить его через onclick, чтобы получить его в fnAdd (), но я не могу получить доступ к param.element вообще.

Кто-нибудь знает, как решить эту проблему?

Answer 1

Я надеюсь, что это решение поможет вам:

Помните Patter designs, в этом случае мы можем использовать Factory patter, с этим вы можете повторно использовать этот код для создания кусков кода.

В этом примере каждая кнопка также может запускать разные функции и иметь разные параметры!

// YOUR JAVASCRIPT WITH ACCESS TO THE DOM
// here you call your plugin where the DOM is not present
function getButton() {
  let newButtonInString = createButtonPlugin();
  // in newButton you just have the string
  // now convert it to html using Jquery 
  let htmlButton = $(newButtonInString);
  document.body.append(htmlButton[0]);
}

// YOUR PLUGIN JS
let counter = 1;
function createButtonPlugin() {
  // you can take this params from the UI
   let paramsExample = {
     text: `New Button ${counter}`,
     functionParams: { 
       counter: counter
     }  // Could be an object or what you want!
   }

   let bp = new ButtonPrototype(paramsExample);
   let newButton = bp.createButton();
   counter++;
   // return string to the place where you can render the button
   return newButton;
}

class ButtonPrototype {
  constructor(params){
     this.params = params
  }

  createButton() {
    return `<button onclick=fn(${JSON.stringify(this.params.functionParams)})>${this.params.text}</button>`
  }
}

function fn (args) {
  alert(`Success ${args.counter}`)
}

Ваш html:

<button onclick="getButton()">add</button>

Я также оставляю кодовую ручку: Только что обновил ваш новый комментарий! https://codepen.io/ruben-saucedo/pen/GbxXNG

Answer 2

Вы можете использовать метод bind, чтобы прикрепить ваш params для достижения этой цели. Пример кода ниже

function add(param) {
  let btn = document.createElement('button');
  btn.innerHTML = 'NEW - ' + new Date().getTime();
  btn.onclick = newButtonOnclick.bind(this, (param || new Date().getTime()))
  document.body.append(btn)
}

function newButtonOnclick(param) {
  alert(param);
}

button {
  display: block;
  margin-bottom: 1em;
}

<button type="button" onclick="add();">
Add New Button
</button>