Javascript 如何在动态创建的字符串中传递内联onclick事件中的元素

我得到了一个函数，根据收到的参数为剑道网格工具栏创建一个按钮模板。我想做的是通过onclick函数传递名为

element

（它是一个jquery元素）的参数中的一个属性，这样我就可以在函数

fnAdd（element）

中访问该元素

函数（参数）
{
var template=“添加”；
$（“#网格”）.kendoGrid({
工具栏：模板
});
}

目前，onclick函数不起作用。我尝试在param上使用JSON.stringify并通过onclick将其传递给fnAdd（），但我根本无法访问param.element

---

有人知道如何解决这个问题吗？

您可以使用

bind

方法附加

参数来实现这一点。下面是示例代码


函数添加（参数）{
设btn=document.createElement（'button'）；
btn.innerHTML='NEW-'+NEW Date（）.getTime（）；
btn.onclick=newButtonOnclick.bind（此，（参数| | new Date（）.getTime（））
document.body.append（btn）
}
函数newButtonOnclick（参数）{
警报（参数）；
}
按钮{
显示：块；
边缘底部：1米；
}

添加新按钮
您可以使用
bind
方法附加
参数来实现此目的。下面是示例代码


函数添加（参数）{
设btn=document.createElement（'button'）；
btn.innerHTML='NEW-'+NEW Date（）.getTime（）；
btn.onclick=newButtonOnclick.bind（此，（参数| | new Date（）.getTime（））
document.body.append（btn）
}
函数newButtonOnclick（参数）{
警报（参数）；
}
按钮{
显示：块；
边缘底部：1米；
}

添加新按钮
我希望此解决方案能够帮助您：

记住
模式设计
，在这种情况下，我们可以使用
工厂模式
，您可以重用此代码来创建代码块

在本例中，每个按钮也可以触发不同的功能，并且可以具有不同的参数

// 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}`)
}


//您的JAVASCRIPT可以访问DOM
//在这里，您可以在不存在DOM的地方调用插件
函数getButton（）{
让newButtonInString=createButtonPlugin（）；
//在newButton中，只有字符串
//现在使用Jquery将其转换为html
设htmlButton=$（newButtonInString）；
document.body.append（htmlButton[0]）；
}
//你的插件JS
设计数器=1；
函数createButtonPlugin（）{
//您可以从UI获取此参数
设paramsecsample={
text:`New Button${counter}`，
函数参数：{
柜台：柜台
}//可能是一个对象或您想要的！
}
设bp=新按钮原型（paramsecample）；
让newButton=bp.createButton（）；
计数器++；
//将字符串返回到可以渲染按钮的位置
返回纽扣；
}
类按钮原型{
构造函数（参数）{
this.params=params
}
createButton（）{
返回`${this.params.text}`
}
}
函数fn（args）{
警报（`Success${args.counter}`）
}

您的html：

添加

我还留下了代码笔：刚刚更新了你的新评论！
我希望此解决方案能够帮助您：

记住
模式设计
，在这种情况下，我们可以使用
工厂模式
，您可以重用此代码来创建代码块

在本例中，每个按钮也可以触发不同的功能，并且可以具有不同的参数

// 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}`)
}


//您的JAVASCRIPT可以访问DOM
//在这里，您可以在不存在DOM的地方调用插件
函数getButton（）{
让newButtonInString=createButtonPlugin（）；
//在newButton中，只有字符串
//现在使用Jquery将其转换为html
设htmlButton=$（newButtonInString）；
document.body.append（htmlButton[0]）；
}
//你的插件JS
设计数器=1；
函数createButtonPlugin（）{
//您可以从UI获取此参数
设paramsecsample={
text:`New Button${counter}`，
函数参数：{
柜台：柜台
}//可能是一个对象或您想要的！
}
设bp=新按钮原型（paramsecample）；
让newButton=bp.createButton（）；
计数器++；
//将字符串返回到可以渲染按钮的位置
返回纽扣；
}
类按钮原型{
构造函数（参数）{
this.params=params
}
createButton（）{
返回`${this.params.text}`
}
}
函数fn（args）{
警报（`Success${args.counter}`）
}

您的html：

添加

我还留下了代码笔：刚刚更新了你的新评论！
我试过这个。。这不是工作。。我想是因为我生成的模板是用于另一个插件的，所以“它”不知道在哪里附加它。。但是谢谢你的帮助嗯，是的，有道理。但是你能至少在你的插件中引用DOM中的一个元素吗？如果是，向要呈现按钮的DOM主体添加id可以解决此问题。或者你的插件是完全独立于DOM的？在这种情况下，只需返回字符串，而不是创建html。然后在你想要的地方渲染。我已经更新了代码笔和评论，如果你想检查它！我试过这个。。这不是工作。。我想是因为我生成的模板是用于另一个插件的，所以“它”不知道在哪里附加它。。但是谢谢你的帮助嗯，是的，有道理。但是你能至少在你的插件中引用DOM中的一个元素吗？如果是，向要呈现按钮的DOM主体添加id可以解决此问题。或者你的插件是完全独立于DOM的？在这种情况下，只需返回字符串，而不是创建html。然后在你想要的地方渲染。我已经更新了代码笔和评论，如果你想检查它！