Question

我正在尝试在传单中的bindPop中创建一个按钮侦听器函数。但是it does not read parameter of onclick function。在下面的代码alertConfirmed()function works fine中，我but filterEventsBasedOnCluster(feature) does not read the parameter 'feature'。它表示功能未定义。 功能是一个对象。

这是代码：

 layer.bindPopup('<div id="alert">Found...!<input type="button" value="Please confirm" onclick="alertConfirmed()"> <input type="button" id="create" value="see patients" onclick="filterEventsBasedOnCluster(feature)"><table id="table"></table></div>')

`

非常感谢任何帮助。

Answer 1

如果您通过onclick HTML attribute附加事件处理程序，则无法控制该处理程序接收的参数。让我引用文档：

传递给指定事件处理函数的单个参数是MouseEvent对象。在处理程序中，this将是触发事件的元素。

传递自定义参数的方法是通过使用一个返回仅接收事件引用的函数的函数来定义闭包。

这与«Leaflet.contextmenu callbacks»和«Leaflet marker event fires at wrong time»中描述的解决方案完全相同。

阅读。我的意思是。

所以最后看起来应该是这样的：

function getHandlerForFeature(feat) {  // A function...
    return function(ev) {   // ...that returns a function...
        console.log(feat);  // ...that has a closure over the value.
    }
} 

layer.bindPopup("<button id='mybutton'>Foo!</button>")

// The button doesn't exist in the DOM until the popup has been opened, so
layer.on('popupopen', function(){
    L.DomEvent.on( 
         document.getElementById('mybutton'), 
         'click',
         getHandlerForFeature(layer) // The result of this call is the event handler func.
    );
});

请注意，您可以不使用onclick="code"语法，因为您需要创建可运行代码的字符串，并且该代码只能访问全局范围中的变量。当然，您可以JSON.stringify()您的数据，但您将无法在外部引用变量。

Answer 2

试试这个：

我只是纠正错误的部分：

onclick="filterEventsBasedOnCluster('+feature+')"

您没有正确传递变量。

在传单中的bindPopUp内的按钮onclick函数内传递参数

2 个答案: